rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.94k stars 866 forks source link

Using redux-persist with Immer. #1068

Open michaelcuneo opened 5 years ago

michaelcuneo commented 5 years ago

I've added redux-persist to the latest version of React-Boilerplate, and I can't seem to find a configuration that will support them working alongside each other. I get a lot of state.forEach is not a function, and state.has is not a function.

reducers.js

const globalPersistConfig = {
  key: 'global',
  storage: localForage,
};

const userPersistConfig = {
  key: 'user',
  storage: localForage,
};

const languageProviderConfig = {
  key: 'language',
  storage: localForage,
};

const routerProviderConfig = {
  key: 'router',
  storage: localForage,
};

/**
 * Merges the main reducer with the router state and dynamically injected reducers
 */
export default function createReducer(injectedReducers = {}) {
  const rootReducer = combineReducers({
    global: persistReducer(globalPersistConfig, globalReducer),
    user: persistReducer(userPersistConfig, userReducer),
    language: persistReducer(languageProviderConfig, languageProviderReducer),
    router: persistReducer(routerProviderConfig, connectRouter(history)),
    ...injectedReducers,
  });

  return rootReducer;
}

In App, I have the following setup... useless lines removed.

// Immer 
setAutoFreeze(true);

// Create redux store with history
const initialState = {};
const store = configureStore(initialState, history);

const persistor = persistStore(store);

const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <ConnectedRouter history={history}>
          <PersistGate loading={null} persistor={persistor}>
            <AuthManager>
              <App />
            </AuthManager>
          </PersistGate>
        </ConnectedRouter>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE,
  );
};

And Configure Store.

  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);

  // Create the store with two middlewares
  // 1. sagaMiddleware: Makes redux-sagas work
  // 2. routerMiddleware: Syncs the location/URL path to the state
  const middlewares = [
    sagaMiddleware,
    routerMiddleware(history),
    createActionBuffer(REHYDRATE),
    createLogger(),
  ];

  const enhancers = [applyMiddleware(...middlewares)];

  const store = autoRehydrate({ log: true })(createStore)(
    createReducer(),
    initialState,
    composeEnhancers(...enhancers),
  );

  persistStore(store, { storage: localForage });

  // Extensions
  store.runSaga = sagaMiddleware.run;
  store.injectedReducers = {}; // Reducer registry
  store.injectedSagas = {}; // Saga registry

Not sure what else I can try.

...etc

yrral86 commented 4 years ago

FYI, latest redux-persist (6.0.0) is working with immer for me.