Cannot update a component while rendering a different component

[Aleksey]

Describe the bug

In version 8.0.1, an error occurs when changing the route.

To Reproduce

codesandbox

Steps to reproduce the behavior:

1. Go to 'Home' page
2. Click on 'To another page'
   An error appears in the console: "preview-protocol.js:13 Warning: Cannot update a component (Home) while rendering a different component (App). To locate the bad setState() call inside App, follow the stack trace as described in"

[Charly Berthet]

Getting same issue when using

export const getServerSideProps = storeWrapper.getServerSideProps(
  () =>
    async ({ params }) => {
      console.log('params', params);
      return { props: {} };
    }
);

export default connect((state: AppState) => state)(Page);

[Kirill Konshin]

Will be fixed in #523 but will require some code changes.

[Hung Phan]

I tried out the 9.0.0-rc.2, it still has some major issue for me.

• Serialization and deserialization issue
  • The code here https://github.com/kirill-konshin/next-redux-wrapper/blob/9.0.0-rc.2/packages/wrapper/src/index.tsx#L66 destroy the action data after it has been deserialized to correct class objects. My action contains class objects, this code action = JSON.parse(JSON.stringify(action, undefinedReplacer)); makes all class become normal object.
• Navigation between page or updating component causes hydration to not populate data. I tried to change component and it immediately crashes because the data is not hydrate in the store

[Kirill Konshin]

@hung-phan I've changed the order and implementation of replacer. You need to first serialize your actions, then replacer with remove undefined. In any case Class objects cannot be transferred as JSON, so you need to create your own serializer.