0

背景

我有使用 redux 和 redux-thunk 的反应应用程序。

试图了解如何编排异步调用。仅当先前调度的动作（API 调用）成功时如何调度动作。

用例

我有EmployeesComponent。该组件有两个虚拟的表示组件

  • EmployeesList 基本上列出了员工。
  • AddEmployeeForm，这是一种添加新员工的模式。

在渲染EmployeesComponent 时，在useEffect 挂钩中，我调度了一个动作来加载员工。到现在为止还挺好。

当我用户在 AddEmployeeForm 中输入数据并提交表单时，如果 API 调用成功，我想再次实现加载所有员工。

我在理解如何知道我是否可以调度加载所有员工的操作时遇到问题。这是我的提交处理程序的样子。

   const handleSubmit = async (e) => {
        e.preventDefault();
    
        console.log("Handle submit add new employee..");
    
        const employeeData = inputs;
        // Validate data from the AddEmployeeForm
        // in case of validation errors, abort



       dispatch(addEmployee(employeeData)); // calls API to save the data

       // How to await the result of the dispatched action (addEmployee) before continuing? 

       // If addEmployee was not successful abort
       // The error data from the API call is saved in the redux store, 
       // so the UI gets notified and can display it properly

        // If addEmployee was successful, I want to
        clearForm(); // local state from the component
        handleCloseForm(); // local state from the component

        dispatch(loadEmployees());
      };

挑战

handleSubmit 中的当前方法对我来说很臭。业务逻辑有点放在 UI 中，并且失去了将 UI 和业务逻辑明确分离的好处。我很难弄清楚要采用什么方法以及如何处理这些用例。

另一个用例示例：

  • 派遣登录用户
  • 如果登录成功，您会从后端获取令牌
  • 如果登录成功，则根据检索到的令牌调度一个操作以加载用户数据
4

1 回答 1

2

在 Redux 中，异步逻辑通常以“thunk”函数的形式编写。这使您可以提取需要与 React 组件之外的存储交互的逻辑，尤其是需要执行诸如获取数据和分派结果之类的操作的异步逻辑。

您还可以从 thunk 返回一个承诺，并在调度后在组件中等待该承诺。

于 2021-03-19T21:52:30.493 回答