redux persist crash when multiple

Question

I'm using redux-persist in react js app. I have 2 reducers called: auth, streams. when I define both of them together with persistReducer

import { combineReducers } from 'redux';
import storage from 'redux-persist/lib/storage' 
import { persistReducer } from 'redux-persist'
import { combineReducers } from 'redux';
import storage from 'redux-persist/lib/storage' 
import { persistReducer } from 'redux-persist'

import auth  from './auth.reducer';
import stream  from './stream.reducer';

const rootPersistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['auth','stream'],
}
const authPersistConfig = {
    key: 'auth',
    storage: storage,
  };
const streamsPersistConfig = {
  key: 'stream',
  storage: storage,
  };





const rootReducer = combineReducers({
  auth:persistReducer(authPersistConfig,auth),
  stream:persistReducer(streamsPersistConfig,stream),
});

export default persistReducer(rootPersistConfig, rootReducer)\

it crash and throw error

but when I define only one persistReducer (no matter which of them)

import { combineReducers } from 'redux';
import storage from 'redux-persist/lib/storage' 
import { persistReducer } from 'redux-persist'

import auth  from './auth.reducer';
import stream  from './stream.reducer';

const rootPersistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['auth','stream'],
}
const authPersistConfig = {
    key: 'auth',
    storage: storage,
  };




const rootReducer = combineReducers({
  auth:persistReducer(authPersistConfig,auth),
  stream:stream
});

export default persistReducer(rootPersistConfig, rootReducer)

it works fine and no throws any error.

Answer 1

My solution looks like following snippet

// store.js

import { createStore, combineReducers } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import auth from './auth'
import stream from './stream'

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

const rootReducer = combineReducers({
  auth,
  stream,
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  const store = createStore(persistedReducer)
  const persistor = persistStore(store)

  return { store, persistor }
}