如何將 state 類型引導到 @reduxjs/toolkit 的 createStore function 中預期的 StoreEnhancer？

Question

我正在使用 Dan Abramov 的文章將我的 redux 存儲與瀏覽器 LocalStorage 同步。

問題是我正在使用 typescript 並且當我嘗試通過以下方式創建商店時：

const store = createStore(
  App,
  persistedState
);

（persistedState 是 IStoreState | undefined 的 object 類型）然后 typescript 會引發錯誤：

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

我的問題是如何將我的 state 轉換為 StoreEnhancer 以成功地將其傳遞給 createStore function？

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 loadState() function 上的返回類型來修復錯誤，但我有更好的解決方案。

---

通過使用 Redux 工具包中的configureStore實用程序，您可以避免混淆要匹配哪個重載。 您將persistedState設置為存儲配置的preloadedState屬性。 這個屬性是可選的，所以undefined是可以的。

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

---

您可能想查看redux-persist package，它通過許多配置選項實現了這個想法。