[SOLVED] Error when using redux-persist with redux-immutable

Error when using redux-persist with redux-immutable

I try to use redux-immutable with redux-persist.

I searched for a lot, but I didn't find any solutions to resolve this issue.

store.js:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';
import logger from 'redux-logger';
import { createEpicMiddleware } from 'redux-observable';
import immutableTransform from 'redux-persist-transform-immutable';
import { persistStore, persistReducer } from 'redux-persist';
import { combineReducers } from 'redux-immutable';
import { Map } from 'immutable';
import { routerReducer } from 'react-router-redux';
import storage from 'redux-persist/lib/storage';
import createFilter from 'redux-persist-transform-filter';
import epics from './epics';
import reducers from './reducers';

const middlewares = [createEpicMiddleware(epics), logger];
const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });

const saveSubsetFilter = createFilter(
  'Login',
  ['userData'],
);

const persistConfig = {
  key: 'reduxStore',
  storage,
  transforms: [saveSubsetFilter, immutableTransform()],
};

const initialState = Map();

const persistedReducer = persistReducer(persistConfig, combineReducers({
  ...reducers,
  routing: routerReducer,
}));

export const store = createStore(
  persistedReducer,
  initialState,
  composeEnhancers(applyMiddleware(...middlewares)),
);

export const persistor = persistStore(store);

My errors in console:

The previous state received by the reducer is of unexpected type. Expected argument to be an instance of Immutable.Collection or Immutable.Record with the following properties: "Login", "Campaigns", "Websites", "routing".

Uncaught TypeError: inputState.withMutations is not a function

Note:

I didn't have any error before add redux-persist.

Please help me if you have any idea.

Solution

Redux-persist expects the state returned by the reducer, which you pass to persistReducer to be a plain object.

It will take advantage of this fact, by injecting an extra property into this object which will be used to host redux-persist state..

What it means for you, is that in order to use current version of redux-persist you must get rid of redux-immutable, and use redux own combineReducers instead.

redux-persist-transform-immutable will allow you to store Lists, Maps, Records, etc. in your state tree, but the above rule still applies: your root state, or the state of the reducer you pass to persistReducer, must be a plain object.