使用redux在getInitialProps中访问存储在nextjs中持久化

npm install redux react-redux

// 1. 创建Redux store
import { createStore, combineReducers } from 'redux';

// 定义reducer和action
const initialState = {
  data: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  app: reducer,
});

const store = createStore(rootReducer);

// 2. 在页面组件中使用Provider组件传递store
import { Provider } from 'react-redux';

const MyPage = () => {
  return (
    <Provider store={store}>
      {/* 页面内容 */}
    </Provider>
  );
};

// 3. 在getInitialProps中获取store中的数据
MyPage.getInitialProps = async ({ store }) => {
  // 通过redux的getState方法获取store中的数据
  const data = store.getState().app.data;

  // 处理数据并返回
  return {
    data,
  };
};