store created multiple times

[Mason Yang]

when I visit homepage, the server created a new store and the state data was lost.

below is log file:

1. getProps created store with state {
   settings: {
   locale: {
   languageId: 'english',
   locale: 'en',
   name: 'English',
   icon: 'us'
   },
   collapsed: false,
   settings: {
   _id: '62a99ac1dfdbfc33ff568a62',
   type: 'type',
   taxnumber: '459672303',
   taxcenter: 'California',
   website: 'http://localhost:8000',
   createdAt: '2022-06-15T08:39:29.453Z',
   updatedAt: '2022-06-15T08:46:42.304Z',
   __v: 0
   },
   error: null
   },
   customer: { user: {}, isAuthenticated: false },
   brands: { brands: [], error: null },
   filterProducts: {
   filterProducts: {
   brands: [],
   categories: [],
   text: '',
   variants: [],
   minPrice: null,
   maxPrice: null,
   sort: '',
   limit: 0,
   skip: 0
   },
   error: null
   },
   categories: {
   categories: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
   error: null
   },
   basket: { cartItems: [] },
   topmenu: { topmenu: [ [Object], [Object] ], error: null },
   _persist: { version: -1, rehydrated: true }
   }
2. getProps after dispatches has store state {
   settings: {
   locale: {
   languageId: 'english',
   locale: 'en',
   name: 'English',
   icon: 'us'
   },
   collapsed: false,
   settings: {
   _id: '62a99ac1dfdbfc33ff568a62',
   type: 'type',
   taxnumber: '459672303',
   taxcenter: 'California',
   website: 'http://localhost:8000',
   createdAt: '2022-06-15T08:39:29.453Z',
   updatedAt: '2022-06-15T08:46:42.304Z',
   __v: 0
   },
   error: null
   },
   customer: { user: {}, isAuthenticated: false },
   brands: { brands: [], error: null },
   filterProducts: {
   filterProducts: {
   brands: [],
   categories: [],
   text: '',
   variants: [],
   minPrice: null,
   maxPrice: null,
   sort: '',
   limit: 0,
   skip: 0
   },
   error: null
   },
   categories: {
   categories: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
   error: null
   },
   basket: { cartItems: [] },
   topmenu: { topmenu: [ [Object], [Object] ], error: null },
   _persist: { version: -1, rehydrated: true }
   }
3. getProps created store with state {
   settings: {
   locale: {
   languageId: 'english',
   locale: 'en',
   name: 'English',
   icon: 'us'
   },
   collapsed: false,
   settings: {
   _id: '62a99ac1dfdbfc33ff568a62',
   type: 'type',
   taxnumber: '459672303',
   createdAt: '2022-06-15T08:39:29.453Z',
   updatedAt: '2022-06-15T08:46:42.304Z',
   __v: 0
   },
   error: null
   },
   customer: { user: {}, isAuthenticated: false },
   brands: { brands: [], error: null },
   filterProducts: {
   filterProducts: {
   brands: [],
   categories: [],
   text: '',
   variants: [],
   minPrice: null,
   maxPrice: null,
   sort: '',
   limit: 0,
   skip: 0
   },
   error: null
   },
   categories: {
   categories: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
   error: null
   },
   basket: { cartItems: [] },
   topmenu: { topmenu: [ [Object], [Object] ], error: null },
   _persist: { version: -1, rehydrated: true }
   }
4. getProps after dispatches has store state {
   settings: {
   locale: {
   languageId: 'english',
   locale: 'en',
   name: 'English',
   icon: 'us'
   },
   collapsed: false,
   settings: {
   _id: '62a99ac1dfdbfc33ff568a62',
   type: 'type',
   taxnumber: '459672303',
   taxcenter: 'California',
   createdAt: '2022-06-15T08:39:29.453Z',
   updatedAt: '2022-06-15T08:46:42.304Z',
   __v: 0
   },
   error: null
   },
   customer: { user: {}, isAuthenticated: false },
   brands: { brands: [], error: null },
   filterProducts: {
   filterProducts: {
   brands: [],
   categories: [],
   text: '',
   variants: [],
   minPrice: null,
   maxPrice: null,
   sort: '',
   limit: 0,
   skip: 0
   },
   error: null
   },
   categories: {
   categories: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
   error: null
   },
   basket: { cartItems: [] },
   topmenu: { topmenu: [ [Object], [Object] ], error: null },
   _persist: { version: -1, rehydrated: true }
   }

"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,
};

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
return store;

}

}
*/

export const wrapper = createWrapper(() => store, { debug: true });

`

`
import { wrapper } from "../redux/store";

const HomeApp = ({ Component, ...rest }) => {
const { store, props } = wrapper.useWrappedStore(rest);

return (



{() => (

<Component {...props.pageProps} />

)}



);
};

HomeApp.getInitialProps = wrapper.getInitialPageProps((store) => async () => {

await store.dispatch(getSettings());
await store.dispatch(getTopMenu());
await store.dispatch(getCategories());

});

export default HomeApp;
`

[Kirill Konshin]

Store can be created multiple times on server. Please read the docs.

No sandbox provided, closing.

[Mason Yang]

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]

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.