/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().

[ribeaud]

Describe the bug

Since v8.0.0, I am getting following warning in the console:

/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().

This is NOT the case with 7.0.5.

Because I was not able to find any release notes for next-redux-wrapper, I am not sure whether the problem is on my side, or on next-redux-wrapper's side.

Expected behaviour

The warning does NOT appear.

Desktop (please complete the following information):

• OS: macOS Monterey v12.6
• Browser: Chrome v105.0.5195.102

[aldabil21]

You did not provide code snippet of your _app
So I assume that it's like:

// ...
// Your _app
// ... 

export default wrapper.withRedux(MyApp);

Instead, replace it with:

const MyApp = ({ Component, ...rest }: AppProps) => {
  const { store, props } = wrapper.useWrappedStore(rest);
  return (
    <Provider store={store}>
      <Component {...props.pageProps} />
    </Provider>
  );
};

export default MyApp;

source: redux toolkit example

[kirill-konshin]

@ribeaud this behavior is by design. @aldabil21 is absolutely correct, it is the recommended way to use the library.

[ribeaud]

Thank you guys. And sorry to be so lazy...

Unfortunately, I am still a bit lost (NOT being an expert here). Our _app code is located here.

How should I update this code?

[kirill-konshin]

https://gitlab.com/biomedit/portal/-/blob/dev/frontend/pages/_app.tsx#L160

Follow @aldabil21 advice.

[phryneas]

I came here because someone had a StackOverflow question on this - and checking the repo, this is acutally not really mentioned in the README at the moment.

There is a section on useWrappedStore but ironically it shows the wrapper.withRedux HOC - that one might need an update :)

[ribeaud]

For who is interested (could not find a better way...), I ended up with following solution (using this app definition):

const AppWrapper = ({ Component, ...rest }: AppProps): ReactElement => {
  const { store, props } = wrapper.useWrappedStore(rest);
  return (
    <Provider store={store}>
      <App Component={Component} {...props} />
    </Provider>
  );
};

export default appWithTranslation(AppWrapper, nextI18NextConfig);

[kirill-konshin]

The section in readme has been corrupted somehow after merges, I've fixed it: https://github.com/kirill-konshin/next-redux-wrapper#wrapperusewrappedstore

[nnurmano]

The section in readme has been corrupted somehow after merges, I've fixed it: https://github.com/kirill-konshin/next-redux-wrapper#wrapperusewrappedstore

It still shows wrapper.withRedux code with a class component, could you please update the code?