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

【问题标题】：How to lead state type to StoreEnhancer expected in createStore function of @reduxjs/toolkit?如何将状态类型引导到 @reduxjs/toolkit 的 createStore 函数中预期的 StoreEnhancer？
【发布时间】：2021-04-06 08:43:51
【问题描述】：

我正在使用 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 函数？

【问题讨论】：

标签： reactjs typescript redux redux-toolkit

【解决方案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() 函数的返回类型来修复错误，但我有更好的解决方案。

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

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

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

【讨论】：