kirill-konshin
commented
1 year ago Store can be created multiple times on server. Please read the docs.
No sandbox provided, closing.
Closed epubreader closed 1 year ago
kirill-konshin
commented
1 year ago Store can be created multiple times on server. Please read the docs.
No sandbox provided, closing.
epubreader
commented
1 year ago Store can be created multiple times on server. Please read the docs.
No sandbox provided, closing.
but the state was lost, I use getServerSideProps method in homepage and getInitialPageProps in _app.js
kirill-konshin
commented
1 year ago Please provide code sandbox. Also you should use getInitialAppProps in _app.js, not getInitialPageProps in _app.js. Please read the documentation, it covers this scenario too.
when I visit homepage, the server created a new store and the state data was lost.
below is log file:
"next": "^13.1.4", "next-redux-wrapper": "^8.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-image-zoom": "^1.3.1", "react-infinite-scroll-component": "^6.1.0", "react-intl": "^5.24.7", "react-lazy-load-image-component": "^1.5.1", "react-magnifier": "^3.0.4", "react-redux": "^7.2.6", "redux": "^4.1.2", "redux-persist": "^6.0.0", "redux-thunk": "^2.4.1",` import { configureStore } from "@reduxjs/toolkit"; import { createWrapper, HYDRATE } from "next-redux-wrapper"; import { persistReducer, persistStore } from "redux-persist"; import thunk from "redux-thunk"; import rootReducer from "./reducers/index"; import storage from "./syncStorage";
const reducer = (state, action) => {
return rootReducer(state, action);
};
const makeConfiguredStore = (reducer) => configureStore({ reducer: reducer, devTools: process.env.NODE_ENV === "development", middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false, }).concat(thunk), });
const persistConfig = { key: "state", whitelist: ['basket', 'customer'], // make sure it does not clash with server keys //blacklist: ["menuReducer"], storage, };
const persistedReducer = persistReducer(persistConfig, reducer); const store = makeConfiguredStore(persistedReducer); store.persistor = persistStore(store); // This creates a persistor object & push that persisted object to .persistor, so that we can avail the persistability feature
/* const makeStore = ({ isServer }) => { console.log("makeStore"); debugger; if (isServer) { // If it's on server side, create a store return makeConfiguredStore(rootReducer); } else { // If it's on client side, create a store which will persist const persistConfig = { key: "state", whitelist: ['basket', 'customer'], // make sure it does not clash with server keys //blacklist: ["menuReducer"], storage, };
}
} */
export const wrapper = createWrapper(() => store, { debug: true });
`
` import { wrapper } from "../redux/store";
const HomeApp = ({ Component, ...rest }) => { const { store, props } = wrapper.useWrappedStore(rest);
return (
); };
HomeApp.getInitialProps = wrapper.getInitialPageProps((store) => async () => {
await store.dispatch(getSettings()); await store.dispatch(getTopMenu()); await store.dispatch(getCategories());
});
export default HomeApp; `