如何将 redux-persist 与工具包和 next-redux-wrapper 一起使用？

Question

redux-toolkit我在、redux-persist和配置方面遇到问题next-redux-wrapper。我尝试使 redux 状态持久化，但它不运行应将状态保存到本地存储的 redux 操作。

我的store.ts文件。

import {
  Action,
  combineReducers,
  configureStore,
  ThunkAction,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { createWrapper } from 'next-redux-wrapper';
import taskReducer from './reducers/taskReducer';
import projectReducer from './reducers/projectReducer';
import workplaceReducer from './reducers/workplaceReducer';
import userReducer from './reducers/userReducer';
import trackTaskReducer from './reducers/trackTaskReducer';
import chatRoomReducer from './reducers/chatRoomReducer';
import messageReducer from './reducers/messageReducer';

const rootReducer = combineReducers({
  taskReducer,
  projectReducer,
  workplaceReducer,
  userReducer,
  trackTaskReducer,
  chatRoomReducer,
  messageReducer,
});

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false,
});

export const setupStore = () => {
  return configureStore({
    reducer: persistedReducer,
    middleware: customizedMiddleware,
  });
};

export type AppStore = ReturnType<typeof setupStore>;
export type AppState = ReturnType<AppStore['getState']>;
export type AppDispatch = AppStore['dispatch'];
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action
>;

export const wrapper = createWrapper<AppStore>(setupStore);

我的app.tsx档案

import React from 'react';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';

import { useRouter } from 'next/router';
import type { AppProps } from 'next/app';
import { setupStore, wrapper } from '../store/store';

export default wrapper.withRedux(function MyApp({
  Component,
  pageProps,
}: AppProps) {
  const persistor = persistStore(setupStore());
  return (
      <PersistGate persistor={persistor} loading={<div>Loading</div>}>
        <Component {...pageProps} />
      </PersistGate>
  );
});

它将初始状态保存到本地存储，但不保存未来对状态的更改。我究竟做错了什么？

Answer 1

所以我找到了适合我的解决方案：

import {
  Action,
  combineReducers,
  configureStore,
  ThunkAction,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({
  // your reducers
});

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false,
});

export const setupStore = () => {
  return configureStore({
    reducer: persistedReducer,
    middleware: customizedMiddleware,
  });
};

export const persistedStore = () => persistStore(setupStore());

export type AppStore = ReturnType<typeof setupStore>;
export type AppState = ReturnType<AppStore['getState']>;
export type AppDispatch = AppStore['dispatch'];
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action
>;

export const store = setupStore();

警告：你的减速器必须有这样的额外减速器：

extraReducers: {
[HYDRATE]: (state, action) => {
  return {
    ...state,
    ...action.payload.chatRoom,
  };
},

另外我不知道它是否适用于 SSR，因为我不需要该功能