我正在使用 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);
请让我知道有人知道为什么。谢谢你。