如何在 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.

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

How to perform dependent async calls in redux?

redux

redux-thunk

react-redux

redux-async-actions

背景

用例

挑战