Issue with v8.0 of library

Describe the bug

I’m having an issue with the latest version of the library. v8.0 The new version somehow reset the state(or it stays empty as the initial state) during navigation only. when I visit the page through a URL or a hard refresh this is not an issue I get the expected state. but when navigating the client side my app just crashes cause of an empty state.

To Reproduce

Steps to reproduce the behavior:

1. Have an app with multiple pages
2. Navigate to the second page which is using getStaticProps or getServerSideProps
3. Empty state error

Expected behavior

Reverting back to version 7.0.5 fixed the issue.

Desktop (please complete the following information):

• Browser Chrome
• Version WIN 10

Additional context

Dependencies I’m using:

  "@reduxjs/toolkit": "^1.8.5",
  "next": "^12.3.1",
  "next-with-less": "^2.0.5",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-fast-compare": "^3.2.0",
  "react-icons": "^4.4.0",
  "react-redux": "^8.0.4",

Thanks!

[Osein]

When i upgrade to v8 this happens on my project too, reverted back to v7

[rsagiev]

I make my own version of wrapper store.js

let store;
let prev = null;

const makeStore = (preloadedState) => {
  return configureStore({
    reducer: {
      main: mainReducer,
      home: homeReducer,
      viewport: viewportReducer,
      blog: blogReducer,
      portfolio: portfolioReducer,
      pages: pagesReducer
    },
    preloadedState: mergeDeep(initialState, preloadedState),
    devTools: process.env.NODE_ENV !== 'production'
  });
};

export const getStore = (preloadedState) => {
  if (typeof window === 'undefined') return makeStore(preloadedState); // for SSR

  if (!store) {
    store = makeStore(preloadedState);
  } else {
    if (prev !== preloadedState && preloadedState) {
      store.dispatch({
        type: 'HYDRATE',
        payload: preloadedState,
      });
      prev = preloadedState;
      console.log('after hydrate', store.getState());
    }
  }

  return store;
};

_app.js

const MyApp = ({ Component, pageProps }) => {
  const { initialState, ...restPageProps } = pageProps;
  const store = getStore(initialState);
  const router = useRouter();

  return (
    <>
      <Provider store={store}>
        <Component {...restPageProps} />
      </Provider>
    </>
  );
};