kirill-konshin/next-redux-wrapper

store created multiple times

epubreader opened this issue · 3 comments

epubreader commented

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 commented

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

No sandbox provided, closing.

epubreader commented

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

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.