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

Question

When I Try to dispatch in getServerSideProps the Redux Store won't change

When i Console.log the store After Dispatch I see the changes in console but when the page load the Store is empty array..

Why Changes won't effect?

createSlice

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;

Page

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 is executed on the server, prior rendering the page.
If you need to update your application state you need to dispatch on the component itself.
What you could do is return the loaded data as props, retrieve them in the component, and populate the state there:

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

The state set in the server will get cleared when dehydrations happen. You need to update server state with client 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) =>
  ....