Issue with v8.0 of library

[Yassin AJDI]

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

[Kirill Konshin]

Please provide a codesandbox

[Jan Dočkal]

As a temporary workaround, you can disable client-side transitions between routes.
Simply replace <Link href=""/> from 'next/link' with the <a href="">

To me, it looks like it's a duplicate of #495

[Kirill Konshin]

As a temporary workaround, you can disable client-side transitions between routes. Simply replace <Link href=""/> from 'next/link' with the <a href="">

To me, it looks like it's a duplicate of #495

Do not do that. You will ruin client side state.

[Kirill Konshin]

@ajdiyassin @Osein most likely there is some issue in your HYDRATE handler. It overwrites the store's state. Check the Redux Dev Tools to see how your client state has changed during navigation.

And please provide codesandbox so I can debug.

[hasankhurshid29]

Same happening with me v8.0

[hasankhurshid29]

If anyone finds how to solve this issue with v8.0, please guide me.
@ajdiyassin @Osein

[Roman Sagiev]

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>
    </>
  );
};