如何在redux中执行相关异步调用？背景_Redux_React Redux_Redux Thunk_Redux Async Actions

如何在redux中执行相关异步调用？背景

redux

如何在redux中执行相关异步调用？背景,redux,react-redux,redux-thunk,redux-async-actions,Redux,React Redux,Redux Thunk,Redux Async Actions,我有一个使用redux和redux-thunk的react应用程序试图了解如何编排异步调用。如何仅在先前调度的操作（API调用）成功时调度操作用例我有员工组成部分。该组件有两个虚拟表示组件 EmployeesList，基本上列出了员工 AddEmployeeForm，用于添加新员工在呈现EmployeesComponent时，在useEffect钩子中，我发送一个操作来加载employees。到目前为止，一切顺利当我的用户在AddEmployeeForm中输入数据并提交表单时，如果

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

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

用例我有员工组成部分。该组件有两个虚拟表示组件

EmployeesList，基本上列出了员工
AddEmployeeForm，用于添加新员工

在呈现EmployeesComponent时，在useEffect钩子中，我发送一个操作来加载employees。到目前为止，一切顺利

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

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

const handleSubmit=async（e）=>{
e、 预防默认值（）；
console.log（“处理提交添加新员工…”）；
常量employeeData=输入；
//验证来自AddEmployeeForm的数据
//如果出现验证错误，请中止
dispatch（addEmployee（employeeData））；//调用API保存数据
//在继续之前，如何等待派遣行动（addEmployee）的结果？
//如果addEmployee未成功中止
//API调用的错误数据保存在redux存储中，
//因此UI会得到通知，并可以正确显示它
//如果一个雇员成功了，我想
clearForm（）；//组件的本地状态
handleCloseForm（）；//组件的本地状态
派遣（loadEmployees（））；
};

挑战我对handleSubmit目前的做法很感兴趣。业务逻辑在某种程度上被放置在UI中，而将UI和业务逻辑清晰地分开的好处也就失去了。我很难弄清楚应该采用什么方法以及如何处理这些用例

另一个用例示例：

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