Warning after moving to version 6.0.0-rc.8

Using dependencies

• “next-redux-wrapper”: “^6.0.0-rc.8”
• “redux”: “^4.0.5”
• “redux-persist”: “^6.0.0”
• “next”: “^9.3.5”
• “react-redux”: “^7.2.0”

I’m using a custom _app.js in the project. after upgrading to version 6.0.0-rc.8 next app is failed to build because of store object is undefined in render() method. After adding try:catch block for render method as below it worked. But getting below messages

[both server side and client side] /!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.withRedux().

[server side only] Unexpected keys "AppTree", "Component", "router", "ctx" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "foo", "authentication". Unexpected keys will be ignored.

Also seems like everything works well after using try:catch. am I doing something wrong here?

_app.js

import React from 'react';
import { makeStore } from "../redux/index";
import { Provider } from 'react-redux';
import App from "next/app";
import withRedux from 'next-redux-wrapper';
import { checkServerSideCookie } from '../redux/actions/authActions';
import { PersistGate } from 'redux-persist/integration/react';
import { Router } from "next/router";

class MyApp extends App {

  constructor(props) {
    super(props);
  }

  static async getInitialProps({ Component, ctx }) {
    checkServerSideCookie(ctx);
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
    return { pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;
    try {
      return (
        <Provider store={store}>
          <PersistGate persistor={store.__PERSISTOR} loading={null}>
            <Component {...pageProps} />
          </PersistGate>
        </Provider>
      )
    } catch(e) {
      return <Component {...pageProps} />
    }
  }

}

export default withRedux(makeStore)(MyApp);

redux/index.js

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

export const makeStore = (initialState, options) => {
  let store;
  const isClient = typeof window !== 'undefined';

  if (isClient) {
    const { persistStore, persistReducer } = require('redux-persist');
    const storage = require('redux-persist/lib/storage').default;

    const persistConfig = {
      key: 'root',
      storage
    };

    store = createStore(persistReducer(persistConfig, rootReducer),
      initialState,
      composeWithDevTools(applyMiddleware(thunk)));

    store.__PERSISTOR = persistStore(store);

  } else {
    store = createStore(
      rootReducer,
      initialState,
      composeWithDevTools(applyMiddleware(thunk))
    );
  }

  return store;
};

[Alexander2317]

@neerajincaendo, @infahash, @kirill-konshin This happened because you added initialState parameter to createStore

createStore(reducer, **initialState**, enhancers)

I had exactly the same problem and fixed it by removing initialState from createStore.

I think next.js has its own parameters like "AppTree", "Component", "router", "ctx" and when we write initialState in createStore, we overwrite them.

@kirill-konshin try to check it.

[justirva09]

@Alexander2317 Ahh I see, thanks.