错误 redux-persist 无法创建同步存储。回到 noop 存储。在 next.js 中

Question

我在 Next.js Web 应用程序中收到此问题。我正在尝试使用 persist-redux 建立本地存储；如果有人可以提供帮助，这是我的代码： ` 从“@reduxjs/toolkit”导入{configureStore}； 从“redux-persist”导入 { persistStore, persistReducer };

从“./user/userSlicer”导入userReducer； 从“redux-persist/lib/storage”导入存储；

const persistConfig = { 键：“根”， 版本：1， 贮存， };

const persistedReducer = persistReducer(persistConfig, userReducer);

导出常量存储=configureStore({ 减速器：persistedReducer， 中间件：（getDefaultMiddleware）=> { 返回 getDefaultMiddleware({ 可序列化检查：假， }); }, });

导出类型 RootState = ReturnType;

导出类型 AppDispatch = typeof store.dispatch;`

我期望将数据保存在客户端浏览器存储中

Answer 1

您似乎正在尝试使用 @reduxjs/toolkit 设置 redux-persist 。您的代码看起来大部分是正确的，但有一些问题可能会导致问题。

ReturnType 是一种 TypeScript 实用程序类型，需要函数作为参数。您应该将它与 store.getState 函数一起使用来获取状态的类型。

您试图仅保留 userReducer。如果您的应用程序中有其他减速器，您应该使用combineReducers 将它们组合起来，然后保留根减速器。

以下是解决这些问题的方法：

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import userReducer from "./user/userSlicer";

const persistConfig = {
  key: "root",
  version: 1,
  storage,
};

const rootReducer = combineReducers({
  user: userReducer,
  // other reducers go here
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware({
      serializableCheck: false,
    });
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

此代码会将您的整个状态保存到本地存储。如果您只想保留状态的某些部分，您可以相应地调整 persistConfig 和 rootReducer。