redux - 当我使用 getServerSideProp 它使持久存储不起作用

Question

我开始使用 NextJs 并且当我在任何页面中使用 serverSideProps 函数时，这会阻止persist-redux 工作，redux 存储返回初始数据减速器，甚至 localStorage 用减速器中的初始数据替换其数据

这页纸：

const Home = (props) => {
  const router = useRouter();

  const user = useSelector((state) => selectUser(state));
  const newLang = useSelector((state) => selectLang(state));
  const lang = selectLang(props.initialReduxState);

  const dispatch = useDispatch();
  const stateR = useSelector((state) => state);
  const setLang = (action) => {
    
    dispatch(actions.setLang(action));

    //refresh data serverSide Props data
    router.replace(router.asPath);
  };
  

  return (
    <>
     

      <h1>{lang}</h1>
      <button
        onClick={() => {
          setLang("ar");
        }}
      >
        setArabic
      </button>
      <button onClick={() => setLang("en")}>setEnglish</button>
   
    </>
  );
};

export function getServerSideProps() {
  const reduxStore = initializeStore();

  return { props: { initialReduxState: reduxStore.getState() } };
}

这是商店配置：

import { useMemo } from "react";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunkMiddleware from "redux-thunk";
import reducers from "./reducers";
import createSagaMiddleware from "redux-saga";
import { watchSettings } from "./saga";

let store;

function initStore(initialState) {
  const sagaMiddleware = createSagaMiddleware();
  const middleWares = [sagaMiddleware, thunkMiddleware];

  const Store_ = createStore(
    reducers,
    initialState,
    composeWithDevTools(applyMiddleware(...middleWares))
  );
  Store_.sagaTask = sagaMiddleware.run(watchSettings);
  return Store_;
}

export const initializeStore = (preloadedState) => {
  
  let _store = store ?? initStore(preloadedState);

  if (preloadedState && store) {
    
    _store = initStore({
      ...store.getState(),
      ...preloadedState,
    });
    
    store = undefined;
  }

  if (typeof window === "undefined") return _store;
  if (!store) store = _store;

  return _store;
};

export function useStore(initialState) {
  const store = useMemo(() => initializeStore(initialState), [initialState]);

  return store;
}

这是减速器配置

import settings from "./settings";
import user from "./userReducer";
import { persistReducer, createMigrate } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { migrations } from "./migrations";
import { combineReducers } from "redux";

const Reducers = combineReducers({

  user,
  settings,
});

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["settings"],
};

export default persistReducer(persistConfig, Reducers);

设置减速器：

import * as types from "../types";

const DEFAULT_STATE = {
  lang: "en",
};

const Settings = (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    case types.SET_ARABIC:
      return {
        ...state,
        lang: "ar",
      };
    case types.SET_ENGLISH:
      return {
        ...state,
        lang: "en",
      };

    default:
      return state;
  }
};

export default Settings;

这是选择器：

import { createSelector } from 'reselect';

const selectSettings = state => state.settings;


export const selectLang = createSelector(
    selectSettings,
    settings => settings.lang
);

顺便说一下，只有当我在页面中插入 getServerSideProps 而不插入它时才会出现这个问题，persist redux 工作正常

标签： reduxnext.jsstoreserver-side-renderingpersist