How to run migrations on multiple reducers in redux-persist store?

Question

I have working redux-persist code for one reducer in redux-persist store. I give initial state of reducer to store and after every change in state structure of reducer I update the migration number (which is 25 in this example) and it works fine. But I want to have multiple reducers and run migrations on them separately (according to the need to update them). I have also tried automergelevel2 but it does not updates the key in nested state key. Or is there any other approach instead of applying migrations and automergelevel2.

import rootReducer from "../reducers";
import {persistStore, persistReducer, createMigrate} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import {initialState} from "../reducers/authentication";
const middleware = [thunk];
const MIGRATION_DEBUG = false;
const migrations = {
    25: state => initialState
};
const persistConfig = {
    key: 'persistedReducer',
    storage: storage,
    version: 25,
    migrate: createMigrate(migrations, {debug: MIGRATION_DEBUG}),
    whitelist: [
        'authentication',
    ]
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer, composeWithDevTools(applyMiddleware(...middleware)));
const persistor = persistStore(store);
export {persistor, store}

score 0 · Answer 1 · answered Feb 09 '21 at 10:59

I've tried-failed-succeeded for a week about this multiple reducer migration problem and here is the solution I've reached to.

Creating a unique persistingReducer wrapping around a list of reducers packed in one 'rootReducer' will not allow you to individually migrate any specific reducer.

To future proof any migration on any of your individual reducer, you should wrap each of them with their own persistedReducer and persistConfig.

import { createStore, combineReducers } from 'react-redux';
import { persistStore, persistReducer } from 'redux-persist';
import { r1Config, reducer1 } from './reducer1';
import { r2Config, reducer2 } from './reducer2';

const allReducers = combineReducers({
  r1: persistReducer(r1Config, reducer1),
  r2: persistReducer(r2Config, reducer2)
});

const store = createStore(allReducers);
const persistor = persistStore(store);

Then you can manage the migration of each of the reducer with a 'migrations' object that they can understand.

How to run migrations on multiple reducers in redux-persist store?

1 Answers1