Redux-persist: Rehydrate action is triggered after the Persist action and erase the redux state

[karimone]

I installed redux-persist and seems to work because I can see the actions triggered in the logs.

I have a flow where the app is loaded with a query param. The param is used to call an api endpoint and the result is saved in the store. What I see in the logs is the reversed order of the actions!

Load the page with the query param

1. action persist/PERSIST
2. my actions
3. router5 load another page (another action)
4. action persist/HYDRATE
5. my action fails here because some values were erased by the hydrate.

I'm not an expert, but I guess it should be reversed? first the hydrate and then the persist. Right?

Here the configuration:

import { createStore, applyMiddleware } from 'redux'

import { persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

import {router5Middleware, } from 'redux-router5';
import { reduxPlugin } from 'redux-router5';
import reduxThunkMiddleware from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware'


import reducers from 'reducers';  // the result of a combineReducers
import ic_settings from 'settings';
import {createLogger} from 'redux-logger'


const loggerMiddleware = createLogger({
   level: ic_settings.REDUX_LOG_LEVEL,
});


export default function configureStore(router) {

    // create the middleware for the store
    const createStoreWithMiddleware = applyMiddleware(
        router5Middleware(router),
        promiseMiddleware(),
        reduxThunkMiddleware,
        loggerMiddleware,  // redux-logger
    )(createStore);

    const persistConfig = {
        key: 'root',
        storage,
        stateReconciler: autoMergeLevel2,
        whitelist: ['tab', 'business']
    };

    const persistedReducer = persistReducer(persistConfig, reducers);

    const store = createStoreWithMiddleware(persistedReducer);

    router.usePlugin(reduxPlugin(store.dispatch));

    const persistor = persistStore(store);
    return { store, persistor };

Any idea?

[karimone]

Here a screenshot of the logger. I'm sure something is wrong in the configuration, what can make the hydrate running after the `persist? Do I miss something in the config?

[Baka9k]

@karimone and what is the solution?

[karimone]

Was my fault. I had some calls running outside the PersistGate. Bad design. Mea culpa.

[kevinho]

removing calls outsite persisitgate will make it work? rehydrte before persist?

[jacobedawson]

For fellow Googlers, I managed to resolve the issue of Redux-Persist rehydrating over (and removing) existing state properties by adding a 'stateReconciler' property to the persistConfig object:

// store/index.js 
// other imports...
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2"; // ADDED

export default initialState => {
    // usual setup
    const persistConfig = {
        key: "root",
        storage,
        stateReconciler: autoMergeLevel2 // ADDED
    }
}

The relevant info in redux-persist is here: https://github.com/rt2zz/redux-persist#state-reconciler

[kodunmi]

for anyone having this issue,

clear your localStorage