Redux-persist: "Unexpected key "_persist" found in preloadedState argument passed to createStore.

Created on 20 Jan 2018  路  6Comments  路  Source: rt2zz/redux-persist

When hot reloading an app with persisted storage, after a recent commit https://github.com/rt2zz/redux-persist/commit/90eea57a566fd0a2fb301efa7b0b8156e38c7fae
The error started to appear :/
Tried to blacklist _persist still doesn't help :/

Environment
React-Native: 0.52.0
redux-persist: 5.4.0

My redux-persist config:

const REDUX_PERSIST = {
  active: true,
  reducerVersion: '1.0',
  storeConfig: {
    key: 'primary',
    storage: AsyncStorage,
    blacklist: ['search', 'navigation', 'appState', '_persist'],
    transforms: [immutablePersistenceTransform]
  }
}

Thanks a lot in advance!

Most helpful comment

@Amurmurmur i was able to fix the problem in my project by adding the persist reducer to the nextRootReducer

  if (module.hot) {
    module.hot.accept(() => {
      let nextRootReducer = require("./").reducers;
      if (REDUX_PERSIST.active) { 
        const persistConfig = REDUX_PERSIST.storeConfig;
        nextRootReducer = persistReducer(persistConfig, reducers);
      }

      store.replaceReducer(nextRootReducer);

      const newYieldedSagas = require("../Sagas").default;
      sagasManager.cancel();
      sagasManager.done.then(() => {
        sagasManager = sagaMiddleware.run(newYieldedSagas);
      });
    });
  }

All 6 comments

hm, if you are using blacklist that conditional should never fire since whitelist will always be undefined. Are you sure that commit introduced this issue? Also is there a reason why you are blacklisting _persist, we need _persist to be persisted in order to track the state version.

can you paste your HMR specific reducer code?

I am thinking something about that is causing this.

The other option we have is we could export our own combineReducers that skips the unexpected key check.

@rt2zz Thank you for your quick response first of all!
Here is the HMR code:

  if (module.hot) {
    module.hot.accept(() => {
      const nextRootReducer = require('./').reducers
      store.replaceReducer(nextRootReducer)

      const newYieldedSagas = require('../Sagas').default
      sagasManager.cancel()
      sagasManager.done.then(() => {
        sagasManager = sagaMiddleware.run(newYieldedSagas)
      })
    })
  }

@Amurmurmur i was able to fix the problem in my project by adding the persist reducer to the nextRootReducer

  if (module.hot) {
    module.hot.accept(() => {
      let nextRootReducer = require("./").reducers;
      if (REDUX_PERSIST.active) { 
        const persistConfig = REDUX_PERSIST.storeConfig;
        nextRootReducer = persistReducer(persistConfig, reducers);
      }

      store.replaceReducer(nextRootReducer);

      const newYieldedSagas = require("../Sagas").default;
      sagasManager.cancel();
      sagasManager.done.then(() => {
        sagasManager = sagaMiddleware.run(newYieldedSagas);
      });
    });
  }

right, I think https://github.com/rt2zz/redux-persist/issues/672#issuecomment-361287820 is the recommended usage with HMR

Otherwise state will not continue to persist after the hot replacement.

Sounds like a docs issue...

Fixed with the suggested code above.
Thank you so much for such a quick response @aselhid and @rt2zz !!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ssorallen picture ssorallen  路  4Comments

therise3107 picture therise3107  路  3Comments

admbtlr picture admbtlr  路  3Comments

thenewt15 picture thenewt15  路  3Comments

peteroid picture peteroid  路  4Comments