如何在 redux 中执行依赖异步调用？

Question

背景

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

试图了解如何编排异步调用。仅在先前已分派的操作（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 和业务逻辑明确分离的好处。我很难弄清楚要采用什么方法以及如何处理这些用例。

另一个用例示例：

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

Answer 1

在 Redux 中，async logic is normally written in the form of "thunk" functions。这使您可以提取需要与 React 组件外部的存储交互的逻辑，尤其是需要执行诸如获取数据和分派结果之类的操作的异步逻辑。

你也可以return a promise from a thunk and await that promise in the component after dispatching。