Persist state of redux

[AleXzpm]

Using redux-injectors makes it imposible to persist the state because the injectorsEnhancer regularly replaces the rootReducer with a new one - and only the initial one of those is persisted. Am I wrong? How can we persist the state of redux?

[siarheipashkevich]

@AleXzpm hi, did you find the solution?

[BenLorantfy]

redux-persist has a piece of documentation that implies one needs to call persistReducer every time they call replaceReducer. Since we call replaceReducer internally within this library, it's not possible to use redux-persist currently.

We could probably add a mechanism for allowing this. Maybe some kind of hook onReplaceReducer or something. I'll try to find some time to look into this.

[siarheipashkevich]

@BenLorantfy thank you, and could you please investigate how we can use immer with your library?

[AleXzpm]

@siarheipashkevich no I did not, other then giving up on Injectors. Hopefully @BenLorantfy can create some hook for this.

[BenLorantfy]

@siarheipashkevich immer should work fine with this library... were you running into any issues?

[BenLorantfy]

@AleXzpm I thought about this some more and I don't think this requires any changes in redux-injectors. Something like this should work:

const createReducer = (injectedReducers) => {
  const combinedReducer = combineReducers(injectedReducers);
  const persistedReducer = persistReducer(persistConfig, combinedReducer);
  return persistedReducer;
}

The key is to move the persistReducer call into createReducer. Lmk if that doesn't work for you.

[Pixel-Jack]

It works for me thank you @BenLorantfy 🙏

[hellofantastic]

@BenLorantfy @Pixel-Jack
Should that last solution work all the same if its dynamic injected reducers like in react-boilerplate-cra-template

import { combineReducers } from '@reduxjs/toolkit';

import { InjectedReducersType } from 'utils/types/injector-typings';

/**
 * Merges the main reducer with the router state and dynamically injected reducers
 */
export function createReducer(injectedReducers: InjectedReducersType = {}) {
  // Initially we don't have any injectedReducers, so returning identity function to avoid the error
  if (Object.keys(injectedReducers).length === 0) {
    return state => state;
  } else {
    return combineReducers({
      ...injectedReducers,
    });
  }
}

as

export function createReducer(injectedReducers: InjectedReducersType = {}) {
  // Initially we don't have any injectedReducers, so returning identity function to avoid the error
  if (Object.keys(injectedReducers).length === 0) {
    return state => state;
  } else {
       const combinedReducers = combineReducers({ ...injectedReducers, });
       const persistedReducer = persistReducer(persistConfig, combinedReducer);
    return persistedReducer;
  }
}

and then in configureStore leave it as

const store = configureStore({
    reducer: createReducer(),
    ...etc
});

[hellofantastic]

EDIT, nope, need to refactor saga reducer wiring, store config, to include reducers/sagas statically for persisting and rehydrating for react-boilerplate-cra-template