Integrate redux and redux-persist

[kimmy-wang]

When next-i18next is integrated in the application, clicking the language switch button will not report any errors; when integrating redux and redux-persist, clicking the language switch button will report an error. What causes this?

Websites

repo

[rafinskipg]

Hey @upcwangying I didn't try your code but i see you are executing getInitialProps.

      let appProps = {}
      if (typeof App.getInitialProps === 'function') {
        appProps = await App.getInitialProps(appContext)
      }

I am pretty sure that this is automatically executed by Next, and you just need to receive them

Take a look at . https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

[kimmy-wang]

In file lib/with-redux-store.js, there is already relevant code

[rafinskipg]

Can you try to change App.getInitialProps(context) by this?

 static async getInitialProps({ Component, ctx }) {
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState
      const reduxStore = getOrCreateStore(initialState)

      // Provide the store to getInitialProps of pages
      ctx.reduxStore = reduxStore

      let appProps = {}
      if (typeof Component.getInitialProps === 'function') {
        appProps = await Component.getInitialProps(ctx)
      }

      return {
        ...appProps,
        initialReduxState: reduxStore.getState(),
      }
    }

[kimmy-wang]

[rafinskipg]

@upcwangying hey man.

Look, there is a package called next-redux-wrapper, they have implemented everything, you can take a look into the source code and find the solution:

https://github.com/kirill-konshin/next-redux-wrapper/blob/master/packages/wrapper/src/index.tsx

And here you have an example use case https://github.com/willianantunes/nextjs-playground/blob/master/src/pages/_app.js