javascript - redux-toolkit 中的异步调度

Question

我正在使用 redux-tookit 作为状态。

我的行动：

const updateSomething = (data: string) => async (dispatch) => {
   await user.set({ data })
   dispatch(updatedData(data))
}

在我看来，我想做类似的事情：

const dispatch = useDispatch()
await dispatch(updateSomething('Hi!'))

Answer 1

2021 年 7 月 5 日更新

TL;博士

如果typeof store.dispatch仍然不能ThunkDispatch作为重载选项之一为您提供正确的输入，您可以考虑手动输入它，如下所示：-

export type AppDispatch = ThunkDispatch<AppState, null | undefined, AnyAction> &
  Dispatch<AnyAction>;

注意：这是使用默认中间件的正确类型，如果您添加了更多中间件，您应该尝试找出可能性。

背景

虽然我提出的解决方案（如下）在代码和框中工作，但它在我的项目中不起作用，我将它从 vanilla redux 移植到 redux 工具包。也许安装的某些软件包会破坏类型，只是一种推测，但是当我包含redux-debounced在我的代码和框示例（下面的链接）中时，即使没有包含在中间件中，for 的类型store.dispatch也会退回到。Dispatch<AnyAction>redux-debounced

这无疑是一个必须解开的谜团！！

---

我遇到了与 TS 类似的问题，所以我在代码沙箱中做了一个简单的项目，令人惊讶的是，它只需稍加调整就可以工作！

在我看来，TS 的意思是这updateSomething('Hi!')是使用createAsyncThunk()redux 工具包创建的有效 thunk，其中调度 thunk 应该返回一个Promise. 这是 redux 工具包中的一个特性。但不幸的是，打字稿以某种方式返回AsyncThunkAction并调用以下行：

await dispatch(updateSomething('Hi!'));

实际上会产生打字错误。这是我在我的代码沙盒项目中得到的：

在我的情况下，fetchDynamicName()是一个有效的 thunk 并且应该类型dispatchReturn应该是Promise.

通过在这篇文章中发现的一个小调整，它确实有效！

我们只需要导出商店的调度类型，如下所示：

export type AppDispatch = typeof store.dispatch;

并在使用它之前将类型分配给调度函数：

const dispatch: AppDispath = useDispatch();

瞧！请看下面的截图：

您可以在https://codesandbox.io/s/fast-cdn-08vpu?file=/src/App.tsx查看我的代码沙盒项目。