0

我正在使用 next-redux-wrapper 6.0.2。我无法使用 getServerSideProps 存储数据,但我可以使用 getInitialProps 来存储。我不明白为什么。这是代码。

export const getServerSideProps = wrapper.getServerSideProps(
    async ({ store, query }) => {
        const {
          checkInDate,
          checkOutDate,
          adultCount,
          childrenCount,
          latitude,
          longitude,
          limit,
          page = "1",
        } = query;
        try {
          const { data } = await getRoomListAPI({
            checkInDate,
            checkOutDate,
            adultCount,
            childrenCount,
            latitude,
            longitude,
            limit: limit || "20",
            page: page || "1",
            location: query.location
              ? encodeURI(query.location as string)
              : undefined,
          });
          
          
          store.dispatch(roomActions.setRooms(data));


        } catch (e) {
          console.log(e);
        }
      
        return {};
      }
);

这个不行

index.getInitialProps = async ({ store, query }) => {
  const {
    checkInDate,
    checkOutDate,
    adultCount,
    childrenCount,
    latitude,
    longitude,
    limit,
    page = "1",
  } = query;
  try {
    const { data } = await getRoomListAPI({
      checkInDate,
      checkOutDate,
      adultCount,
      childrenCount,
      latitude,
      longitude,
      limit: limit || "20",
      page: page || "1",
      location: query.location
        ? encodeURI(query.location as string)
        : undefined,
    });
    store.dispatch(roomActions.setRooms(data));
  } catch (e) {
    console.log(e);
  }

  return {};
};

这个效果很好。

这是 redux-wrapper 的存储选项

import { HYDRATE, createWrapper, MakeStore } from "next-redux-wrapper";
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import {
    TypedUseSelectorHook, useSelector as useReduxSelector
} from "react-redux";
import user from "./user";
import common from "./common";
import auth from "./auth";
import registerRoom from "./registerRoom";
import searchRoom from "./searchRoom";
import room from "./room";

const rootReducer = combineReducers({
    common: common.reducer,
    user: user.reducer,
    auth: auth.reducer,
    registerRoom: registerRoom.reducer,
    searchRoom: searchRoom.reducer,
    room: room.reducer,
});

export type RootState = ReturnType<typeof rootReducer>;

let initialRootState: RootState;

const reducer = (state: any, action: any) => {
    if (action.type === HYDRATE){
        if(state === initialRootState){
            return {
                ...state,
                ...action.payload
            };
        }
        return state;
    }
    return rootReducer(state, action);
};

export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;

const initStore: MakeStore = () => {
    const store = configureStore({
      reducer,
      devTools: true,
    });
    initialRootState = store.getState();
    return store;
  };

export const wrapper = createWrapper(initStore);

请让我知道有人知道为什么。谢谢你。

4

0 回答 0