0

I'm trying to add redux-persist to my web app based on react boilerplate 4. I've followed the documentation but getting the error Could not find router reducer in state tree, it must be mounted under "router".

Changes implemented:

In configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
import { routerMiddleware } from 'connected-react-router';
... Other imports...

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

const persistedReducer = persistReducer(persistConfig, createReducer);

export default function configureStore(initialState = {}, history) {

  ... Boilerplate code...

  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);

  const middlewares = [sagaMiddleware, routerMiddleware(history)];

  const enhancers = [applyMiddleware(...middlewares)];

  const store = createStore(
    persistedReducer,
    initialState,
    composeEnhancers(...enhancers),
  );

  const persistor = persistStore(store);

  ... Boilerplate code...

  return { store, persistor };
}

No changes on reducers.js

In app.js:

... Other imports...
import { PersistGate } from 'redux-persist/integration/react';
... Other imports...

const initialState = {};
const { store, persistor } = configureStore(initialState, history);
const MOUNT_NODE = document.getElementById('app');

const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <LanguageProvider messages={messages}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </LanguageProvider>
      </PersistGate>
    </Provider>,
    MOUNT_NODE,
  );
};

...More code here...

The full error I'm getting is:

Uncaught Could not find router reducer in state tree, it must be mounted under "router"

react-dom.development.js?61bb:17117 The above error occurred in the component: in ConnectedRouter (created by Context.Consumer) in ConnectedRouterWithContext (created by ConnectFunction) in ConnectFunction in IntlProvider (created by LanguageProvider) in LanguageProvider (created by ConnectFunction) in ConnectFunction in PersistGate in Provider

Consider adding an error boundary to your tree to customize error handling behavior. Visit fb.me/react-error-boundaries to learn more about error boundaries. ```

Dave
  • 5,108
  • 16
  • 30
  • 40
Jhony Moncada
  • 21
  • 2

1 Answers1

2

The problem here was with the line that creates the persistentReducer. The correct way is:

const persistedReducer = persistReducer(persistConfig, createReducer());

Since reducers.js exports a funciona and persistReducer expects an object.

Jhony Moncada
  • 21
  • 2