redux-persist - 我无法在 SSR 存储中保留/补充 CSR 存储

Question

我试图从 CSR 商店更新用户信息，然后期望在 SSR 商店获取用户信息。

但正如你所见，没有任何信息。水合作用似乎不起作用。

为了解决问题，我导入store并添加persistor了store.tstype persistor/REHYDRAGE。发生操作时，如何使用 CSR 存储更新 SSR 存储persistor/REHYDRAGE？

我将真诚地感谢您的帮助.......

/* logger */
 action persist/REHYDRATE @ 11:42:00.194
   prev state {
    user: {
      login: loginData {
        authorization: undefined,
        userId: undefined,
        nick: undefined,
        userLevel: undefined,
        userEmail: undefined,
        statCd: undefined,
        roleCd: undefined,
        userExp: 0,
        userPoint: 0,
        userCash: 0,
        userCoin: 0
      },
      profile: profileData {
        userId: undefined,
        nick: undefined,
        userLevel: undefined,
        userEmail: undefined,
        userPoint: 0,
        userExp: 0,
        userCoin: 0,
        userCash: 0,
        overSeasLoginFl: undefined,
        receiveMaketingFl: undefined,
        cart: 0,
        joinPath: undefined
      }
    },
    _persist: { version: -1, rehydrated: false }
  }
   action     {
    type: 'persist/REHYDRATE',
    payload: undefined,
    err: undefined,
    key: 'root'
  }
   next state {
    user: {
      login: loginData {
        authorization: undefined,
        userId: undefined,
        nick: undefined,
        userLevel: undefined,
        userEmail: undefined,
        statCd: undefined,
        roleCd: undefined,
        userExp: 0,
        userPoint: 0,
        userCash: 0,
        userCoin: 0
      },
      profile: profileData {
        userId: undefined,
        nick: undefined,
        userLevel: undefined,
        userEmail: undefined,
        userPoint: 0,
        userExp: 0,
        userCoin: 0,
        userCash: 0,
        overSeasLoginFl: undefined,
        receiveMaketingFl: undefined,
        cart: 0,
        joinPath: undefined
      }
    },
    _persist: { version: -1, rehydrated: true }
  }

我指的是：

• https://github.com/kirill-konshin/next-redux-wrapper
• https://github.com/rt2zz/redux-persist#nested-persists

这些是我的代码。

// reducer/index.ts
import { combineReducers } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';

import user from './user';
import coin from './coin';
// import viewType from './viewType';

const reducer = (state, action) => {
  if (action.type === 'persist/REHYDRATE') {
    const nextState = {
      ...state, // tried to use previous state, but CSR state aren't saved
      ...action.payload, // when I send test action.payload, it works.
    };
    if (state.user) nextState.user = state.user; // preserve count value on client side navigation
    return nextState;
  }
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };

    if (state.user) nextState.user = state.user; // preserve count value on client side navigation
    return nextState;
  } else {
    return combineReducers({
      user,

    })(state, action);
  }
};

export type RootState = ReturnType<typeof reducer>;

export default reducer;

// store/index.ts
import {
  applyMiddleware,
  compose,
  configureStore,
  createStore,
} from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import logger from 'redux-logger';
import reducer from './modules';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import user from './modules/user';
import { composeWithDevTools } from '@redux-devtools/extension';
const initialState = {};
const persistConfig = {
  key: 'root',
  storage,
};
const middlewares = [logger];
const enhancer =
  process.env.NODE_ENV === 'production'
    ? compose(applyMiddleware(...middlewares))
    : composeWithDevTools(applyMiddleware(...middlewares));

export const persistedReducer = persistReducer(persistConfig, reducer);
const makeConfiguredStore = (reducer) =>
  createStore(reducer, initialState, enhancer);

/* I removed those codes, to make only one store and persistor to import, in this file. */

// const isServer = typeof window === 'undefined';
// if (isServer) {
//   const store = makeConfiguredStore(reducer);
//   return store;
// }

export const store = makeConfiguredStore(persistedReducer);
export const persistor = persistStore(store);

//app.tsx

import 'reflect-metadata';
import { Fragment } from 'react';
import Head from 'next/head';
import { ThemeProvider } from 'next-themes';
import 'src/styles/globals.scss';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import dayjs from 'dayjs';
import 'dayjs/locale/ko';
import { persistor, store } from '@store/index';
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';
dayjs.locale('ko');


function MyApp({ Component, pageProps }) {
  const Layout = Component.layout || (({ children }) => <>{children}</>);

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Fragment>
          <ThemeProvider defaultTheme="light" themes={['light', 'dark']}>
            <Head>
              <title>가상자산 커뮤니티의 기준! 코알라&lt;/title>
              <meta
                name="viewport"
                content="initial-scale=1.0, width=device-width maximum-scale=1, minimum-scale=1"
              />
              <meta content="yes" name="apple-mobile-web-app-capable" />
              <meta
                content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no"
                name="viewport"
              />
            </Head>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </ThemeProvider>
        </Fragment>
      </PersistGate>
    </Provider>
  );
}
const makeStore = () => store;
const wrapper = createWrapper(makeStore);

export default wrapper.withRedux(MyApp);