如何在@reduxjs/toolkit的createStore函数中将状态类型引导到StoreEnhancer？

Question

我正在使用 Dan Abramov 的 article 将我的 redux 存储与浏览器 LocalStorage 同步。

问题是我正在使用打字稿，当我尝试通过以下方式创建商店时：

const store = createStore(
  App,
  persistedState
);

（其中 persistedState 是 IStoreState 的对象类型 | undefined）然后 typescript 抛出错误：

Type 'IStoreState' is not assignable to type 'StoreEnhancer<unknown, unknown>'.

我的问题是如何将状态转换为 StoreEnhancer 以成功将其传递给 createStore 函数？

Answer 1

您的错误实际上意味着 createStore 匹配了错误的重载。 createStore 的第二个参数可以是 enhancer 或 preloadedState.

export interface StoreCreator {
  <S, A extends Action, Ext, StateExt>(
    reducer: Reducer<S, A>,
    enhancer?: StoreEnhancer<Ext, StateExt>
  ): Store<S & StateExt, A> & Ext
  <S, A extends Action, Ext, StateExt>(
    reducer: Reducer<S, A>,
    preloadedState?: PreloadedState<S>,
    enhancer?: StoreEnhancer<Ext>
  ): Store<S & StateExt, A> & Ext
}

在这种情况下，它是一个 preloadedState，应该可以分配给 PreloadedState<IStoreState>，它基本上是 IStoreState 的深层部分。也许您可以通过调整 loadState() 函数上的 return 类型来修复错误，但我有更好的解决方案。

您可以使用 Redux Toolkit 中的 configureStore 实用程序避免混淆匹配哪个重载。您将 persistedState 设置为商店配置的 preloadedState 属性。这个属性是可选的，所以 undefined 没问题。

const store = configureStore({
  reducer: App, // can be a reducer or a reducer map object
  preloadedState: persistedState,
});

您可能想查看 redux-persist 包，它通过许多配置选项实现了这个想法。

如何在@reduxjs/toolkit的createStore函数中将状态类型引导到StoreEnhancer？

How to lead state type to StoreEnhancer expected in createStore function of @reduxjs/toolkit?

typescript

reactjs

redux

redux-toolkit