i am losing all the state when i call serversideprops with next-redux-wrapper , the problem that when we go to another page the state dont persist , any solution please ? this is the code ( we are using next": "12.2.3", "redux": "^4.2.0", next-redux-wrapper": "^7.0.5")
import "../styles/globals.css";
import { wrapper } from "../redux/store";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default wrapper.withRedux(MyApp);
const debug = true;
const combinedReducer = combineReducers({
allHousesReducer,
userReducer,
});
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== "production") {
const { composeWithDevTools } = require("redux-devtools-extension");
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const reducer = (state, action) => {
if (action.type === HYDRATE) {
const nextState = {
...state, // use previous state
...action.payload, // apply delta from hydration
};
if (state.allHousesReducer) nextState.allHousesReducer = state.allHousesReducer;
if (state.userReducer) nextState.userReducer = state.userReducer;
return nextState;
} else {
return combinedReducer(state, action);
}
};
export const initStore = (context) => createStore(reducer, compose(bindMiddleware([thunkMiddleware, logger])));
export const wrapper = createWrapper(initStore, { debug });