使用redux-persist，如何将reducer的初始状态设置为本地存储中存储的状态？

Question

我正在使用 Ionic 7、react 18 和 Redux-toolkit 并坚持下去。我想将我的状态之一（购物车）保存到本地存储。我已经设置了我的 cartSlice 如下

interface CartState {
  [key: string]: OrderItem[];
}

const initialState: CartState = {};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    ...
    },

    clearCart: (state) => {
      ...
    },
  },
});

export const {
  addToCart,
  clearCart,
} = cartSlice.actions;

export default cartSlice.reducer;

并按如下方式设置我的根持久减速器

const rootPersistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['auth'],
  stateReconciler: autoMergeLevel2
};

const authPersistConfig = {
  key: 'auth',
  storage: sessionStorage,
}

const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
  cart: cartReducer,
})

const persistedReducer = persistReducer(rootPersistConfig, rootReducer);
export default persistedReducer;

我将其加载到我的商店中，如下所示

export const store = configureStore({
  reducer: persistedReducer,  // rootReducer,
  devTools: import.meta.env.VITE_NODE_ENV !== "production",
});

我不清楚的是如何将我的初始状态设置为本地存储，假设那里已经有东西了。每次加载应用程序时，由于我在切片中设置的方式，我的初始状态都会重置为“{}”，但我不知道如何告诉我的状态可以从本地存储加载初始状态，如果状态已经存在。

Answer 1

回答

您可以使用 rootPersistConfig 配置对象中的 stateReconciler 选项来确保从本地存储（如果可用）填充购物车的初始状态。 stateReconciler 函数负责将本地存储中的持久状态与减速器的默认初始状态相结合。

以下是如何使用stateReconciler函数的示例：

const stateReconciler = (storeState, persistedState) => {
  // Check if there's cart data in local storage
  if (persistedState.cart) {
    // Merge the persisted cart data with the default initial state
    return {
      ...storeState,
      cart: persistedState.cart,
    };
  }

  // If no cart data exists in local storage, use the default initial state
  return storeState;
};

还在 rootPersistConfig 配置中包含以下函数：

const rootPersistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['auth'],
  stateReconciler: stateReconciler,
};

您的购物车的初始状态将从本地存储中填充（如果此设置可用），确保购物车在页面重新加载或应用程序重新启动之间保持持久状态。

我想这会对你有帮助，谢谢。