将 sync thunk 与 redux 工具包一起使用

Question

我习惯了 redux 工具包 createAsyncThunk 但最近我想做一个 thunk 来组合两个 dispatch 调用，像这样:

const askQuestion = (q: string) => (dispatch: any, getState: any) => {
    dispatch(setQuestion(q))
    dispatch(fetchAnswer(q))
}

我只想在函数之类的东西中一个接一个地调用分派，以避免重复代码。我认为最好的方法是 使用 thunk。

问题是我不知道如何使用与 redux-toolkit 不异步的 thunk。另外，我使用 typescript 并且我希望我的代码 strongly typed （例如，我已经有 AppDispatch 的类型）。

实现我想要的最好方法是什么？

Answer 1

经典 thunk 很少显式 return 任何东西，只是调用 dispatch 几次，但是如果你需要等待工作完成，你可以让 thunk 的内部函数 return 一个承诺，然后 await 这个承诺在你的 askQuestion 组合中：https://redux.js.org/usage/writing-logic-thunks#returning-values-from-thunks

在经典的 thunk 中正确键入所有内容已在其他几个 SO 问题中得到解答。

Answer 2

就 JS 代码而言，您编写的示例 thunk 是正确的。

要在 TS 级别正确输入，请按照我们在 Redux core docs "TS Usage: Thunks" section:

中的示例进行操作

// app/store.ts
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  AnyAction
>

// any other file

const askQuestion = (q: string): AppThunk => (dispatch, getState) => {
    // now `dispatch` and `getState` have the right types
    dispatch(setQuestion(q))
    dispatch(fetchAnswer(q))
}

将 sync thunk 与 redux 工具包一起使用

Using sync thunk with redux toolkit

typescript

redux

redux-toolkit