Multiple Storage Configurations

[jayesbe]

How do I handle nested configurations that have different storage types?

ie

const rootPersistConfig = {
    key: "root",
    storage: storageSession, // session storage
    transforms,
    blacklist: ['userState']
};

const userStatePersistConfig = {
    key: "userState",
    storage, // local storage
};

first one is configured for session storage, second one for local storage.

The root reducer is

const persistedUserStateReducer = persistReducer<UserState>(userStatePersistConfig, userState) as typeof userState;

export default combineReducers({
  configState,
  navigationState,
  userState: persistedUserStateReducer
});

that is, userState is stored in local storage, while the rest of the state is stored in session storage ( config and navigation )

How is this do-able with redux-deep-persist

[PiotrKujawa]

Hi @jayesbe, thank you for bringing this specific case. This configuration should work for you. I recommend using session storage from redux-persist otherwise you may have some issues. Reducers are just an example, besides this, you may want to use configureStore instead of createStore which is deprecated. Please let me know if there's anything else I can help with.

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { persistStore, persistReducer } from 'redux-persist';
import { combineReducers, Reducer } from 'redux';
import { getPersistConfig } from 'redux-deep-persist';
import localStorage from 'redux-persist/lib/storage';
import sessionStorage from 'redux-persist/lib/storage/session';

// reducers
const configReducer: Reducer = (state = { settings: false }, action) => {
    switch (action.type) {
        case 'SET_CONFIG':
            return {
                settings: true,
            };

        default:
            return state;
    }
};

const navigationReducer: Reducer = (state = { path: null, param: { nested1: null, nested2: null } }, action) => {
    switch (action.type) {
        case 'SET_NAVIGATION':
            return {
                path: 'page1',
                param: {
                    nested1: 'title',
                    nested2: 'subtitle',
                },
            };

        default:
            return state;
    }
};

const userReducer: Reducer = (
    state = { name: null, age: null, address: { street: null, city: null, country: null } },
    action,
) => {
    switch (action.type) {
        case 'SET_USER':
            return {
                name: 'John Smith',
                age: 18,
                address: {
                    street: 'Cooper Square',
                    city: 'New York',
                    country: 'USA',
                },
            };
        default:
            return state;
    }
};

const userStatePersistConfig = getPersistConfig({
    key: 'userState',
    storage: localStorage, // local storage
    blacklist: ['age', 'address.street'], // in this case I am not storing age and street
    rootReducer: userReducer,
});

const persistedUserStateReducer = persistReducer<ReturnType<typeof userReducer>>(userStatePersistConfig, userReducer);

const rootReducer = combineReducers({
    configState: configReducer,
    navigationState: navigationReducer,
    userState: persistedUserStateReducer,
});

const rootPersistConfig = getPersistConfig({
    key: 'root',
    storage: sessionStorage, // session storage
    blacklist: ['userState', 'navigationState.param.nested1'], // whatever you need to remove from storage
    rootReducer,
});

const persistedRootReducer = persistReducer(rootPersistConfig, rootReducer);

const composedEnhancer = composeWithDevTools(applyMiddleware());

const store = createStore(persistedRootReducer, composedEnhancer);

const persistor = persistStore(store);

export { store, persistor };