如何使 redux 中的两个调度按顺序运行？

Question

假设我有两个我想按顺序触发的派遣

dispatch(action1())
dispatch(action2())

Action1 是使用创建的动作创建者

createAsyncThunk 

来自 redux/toolkit 的方法。

因此，它在这个过程中使用了async...await。

Action2 是一个同步过程。

我要实现

`dispatch(action2())` run only after `action1()` has been dispatched.

我怎样才能做到这一点？

我试过做

dispatch(action1(), dispatch(action2())

但我发现在 reducer 内部调度是一种反模式，因为 reducer 是纯粹的。

Answer 1

请参阅展开结果操作

分派时 Thunk 可能会返回一个值。 一个常见的用例是从 thunk 返回一个 promise，从组件调度 thunk，然后等待 promise 在执行其他工作之前解析：

所以你可以这样做：

dispatch(action1()).then(() => {
  dispatch(action2());
})

Answer 2

一种简单的方法可能是让 action1 在您需要的地方有条件地分派 action2：

const action1 = createAsyncThunk(
  'actions/1',
  async (args, thunkAPI) => {
    const response = await someApi.fetchStuff(args.id);
    if (args.condition) {
        thunkAPI.dispatch(action2());
    }
    return response.data
  }
);

这仅在您不依赖于此时已更新 state 的减速器时才有效（通常在这种情况下，它是关于异步工作已完成）。

但是，如果您还依赖于 state 更新，请尝试dispatch(action1()).then(...)别人给出的答案。

另一种选择是编写协调 action1 和 action2 序列的“经典”thunk（不使用createAsyncThunk ）。

我个人更喜欢最后一个选项，因为更大的 thunk 可以很好地由许多更小的 thunk 组成。

如果您想知道， createAsyncThunk并不意味着在返回结果时分派另一个操作 - 这也可以解决您的问题： https://github.com/reduxjs/redux-toolkit/issues/773