代码之家  ›  专栏  ›  技术社区  ›  thSoft

如何在Redux异步锁中使用AppDispatch类型?

  •  0
  • thSoft  · 技术社区  · 4 年前

    在我的Redux异步链接中,我想使用如下所述推断的AppDispatch类型: https://redux.js.org/recipes/usage-with-typescript

    我遵循了这里的指示: https://redux.js.org/recipes/usage-with-typescript#typing-createasyncthunk

    但是在我的自定义ThunkApiConfig类型中使用此AppDispatch类型时( MyThunkApiConfig 在以下示例中),将有一个循环引用,如下所示: https://codesandbox.io/s/focused-joliot-ho45h?file=/src/usersSlice.ts :

    'dispatch' is referenced directly or indirectly in its own type annotation.

    这是有道理的,因为调度类型和使用的thunks之间存在循环依赖关系。但是,我如何在async thunk中使用AppDispatch呢?

    感谢您提前回复!

    0 回复  |  直到 4 年前
        1
  •  2
  •   Linda Paiste    4 年前

    使用没有问题 AppDispatch 在你的 MyThunkApiConfig 类型。当你这样做的时候,问题就来了 而且 将切片定义为异步操作的函数。这会导致切片类型和调度类型之间的紧密耦合,而调度类型不应该存在。

    如果减速器是 usersSlice.reducer 那么就没有问题了。此版本 使用 这个 updateUser aynsc-thunk,它反过来使用键入的分派。但是切片的类型不依赖于分派类型。它只关心状态的类型和它创建的操作(在这种情况下,没有)。

    你的 createAsyncSlice 另一方面,使用 MyTunkApiConfig 在其参数类型中。因此,这创建了一个圆圈,其中存储类型取决于切片类型,切片类型取决于存储类型。

    我根本不明白你想通过传球来达到什么目的 updateUser aysnc直接链接一个函数,而不是直接使用它。显然,这里的简单解决方案是“不要那样做”。


    如果你想为 AppDispatch 当然,你可以直接这样做。不建议这样做,因为类型很复杂,并且依赖于许多泛型类型参数。

    export type RootState = { users: UsersState }
    export type AppDispatch = Dispatch<AnyAction> & ThunkDispatch<RootState, null, AnyAction> 
    

    在您的示例中,您实际上并不需要 MyTunkApiConfig 完全。你可以把仿制药从 updateUser .他们最终会被推断为 <User, void, {}> 这就足够了。您可以将切片参数键入为 asyncThunk: AsyncThunk<User, void, {}> 这也将解决循环打字问题。