为什么当我尝试在 getServerSideProps 中调度时 State 不会改变？ Redux-Next-Wrapper

Question

当我尝试在 getServerSideProps 中调度时，Redux 存储不会改变

当我在 Dispatch 后 Console.log 商店时，我看到控制台中的更改，但是当页面加载时，商店是空数组..

为什么更改不会生效？

创建切片

import { createSlice } from "@reduxjs/toolkit";
import { Store } from "../../types/type";

const { actions, reducer } = createSlice({
  name: "dashboard",
  initialState: { users: [], roles: [], ads: [], category: [] },
  reducers: {
    SET_ROLES: (store, { payload }) => {
      store.roles = payload;
      return store;
    },
    SET_USERS: (store, { payload }) => {
      store.users = payload;
      return store;
    },
    SET_ADS: (store, { payload }) => {
      store.ads = payload;
      return store;
    },
    SET_CATEGORY: (store, { payload }) => {
      store.category = payload;
      return store;
    },
  },
});

// Selector

export const selectDashboard = (store: Store) => store.entities.dashboard;

export const { SET_ROLES, SET_ADS, SET_USERS, SET_CATEGORY } = actions;
export default reducer;

页

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    const { data: ads } = await axios.get(endPoint);
    const { data: users } = await axios.get(endPoint);
    const { data: roles } = await axios.get(endPoint);
    const { data: categories } = await axios.get(endPoint);
    console.log("Before DISPATCH", store.getState());
    store.dispatch(SET_USERS(users));
    store.dispatch(SET_ADS(ads));
    store.dispatch(SET_CATEGORY(categories));
    store.dispatch(SET_ROLES(roles));
    console.log("After DISPATCH", store.getState()); // I Can See The Changes In Console
    return {
      props: {},
    };
  }
);

Answer 1

getServerSideProps在服务器上执行，先于渲染页面。
如果您需要更新您的应用程序 state，您需要在组件本身上进行调度。
您可以做的是将加载的数据作为道具返回，在组件中检索它们，并在那里填充 state：

const YourComponent = ({ ads, users, roles, categories }) => {
    
    useEffect(() => {
        // Populate application state
        store.dispatch(SET_USERS(users));
        store.dispatch(SET_ADS(ads));
        store.dispatch(SET_CATEGORY(categories));
        store.dispatch(SET_ROLES(roles));
    }, [])

    ...
}

export const getServerSideProps = async (context) => {
    const { data: ads } = await axios.get(endPoint);
    const { data: users } = await axios.get(endPoint);
    const { data: roles } = await axios.get(endPoint);
    const { data: categories } = await axios.get(endPoint);
    return {
      props: {
        ads,
        users,
        roles,
        categories,
      },
    };
  };

Answer 2

当脱水发生时，服务器中设置的 state 将被清除。 您需要使用客户端 state 更新服务器 state。

const reducer = (
  state: ReturnType<typeof combinedReducer> | undefined,
  action: AnyAction
) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    return nextState;
  } else {
    return combinedReducer(state, action);
  }
};



export const store = configureStore({
  reducer,
  devTools: process.env.NODE_ENV !== 'production',
  middleware: (getDefaultMiddleware) =>
  ....