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

Question

背景

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

试图了解如何编排异步调用。如何仅在先前调度的操作(API调用(成功的情况下调度操作。

用例

我有EmployeesComponent。该组件有两个伪表示组件

• 员工列表，主要列出员工
• 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中，异步逻辑通常以"thunk"；功能。这使您能够提取需要与React组件之外的存储交互的逻辑，尤其是需要执行获取数据和调度结果等操作的异步逻辑。

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