redux-persist icon indicating copy to clipboard operation
redux-persist copied to clipboard

Dynamic injection reducer via Hook is not working

Open abdullah-almesbahi opened this issue 6 years ago • 8 comments

I'm using react boilerplate

In react-boilerplate/app/configureStore.js I added

import { AsyncStorage } from "react-native";
import {
  persistReducer,
  persistStore,
} from "redux-persist";
import createReducer from "./reducers";
...
...
const persistConfig = {
    key: "v1",
    storage: AsyncStorage
};
const persistedReducer = persistReducer(persistConfig, createReducer());
...
...
const store = createStore(
    persistedReducer,
    initialState,
    composeEnhancers(...enhancers)
);

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

in react-boilerplate/app/app.js

import { PersistGate } from "redux-persist/integration/react";

// Create redux store with history
const initialState = {};
const { persistor, store } = configureStore(initialState, history);
...
...
<Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
          <AppEntry />
     </PersistGate>
</Provider>

in react-boilerplate/app/utils/reducerInjectors.js added

store.replaceReducer(createReducer(store.injectedReducers));
store.persistor.persist();

in app/containers/HomePage/index.js already added by react boilerplate

import { useInjectReducer } from 'utils/injectReducer';
import reducer from './reducer';
...
...
const key = 'home';
useInjectReducer({ key, reducer });

the error I got in console

Unexpected key "contactPage" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "global", "language", "loginPage", "drawer", "router". Unexpected keys will be ignored.

This error shows because _persist is no more exists in redux state

When we change any thing to redux state , after refreshing the page, every thing will be gone. Without injecting , every things work fine

I spent many hours to fix this and I wasn't able. Any help will be appreciate it

abdullah-almesbahi avatar Apr 30 '19 17:04 abdullah-almesbahi

I think it's because in the store are keys for not yet loaded dynamic reducers. I created related question on SO (and wanted to create an issue here) but I don't know that is it recommended a way to handle injected reducers. It should be added to the documentation if it is (should I make PR?).

ghost avatar Jun 02 '19 20:06 ghost

it will be great if you make PR

abdullah-almesbahi avatar Jun 03 '19 16:06 abdullah-almesbahi

I am facing same issue. how to integrate redux persist in react-boilerplate architecture, Actually I use this architecture in react-native. It works fine when I use it with other sample project like in which there is static reducers not dynamic injectors etc. Now, at this point i am not able to change my app architecture so I am expecting something useful.

MuhammadSulman avatar Jul 26 '19 15:07 MuhammadSulman

A quicker (albeit more manual) approach is to just state each reducer in your root reducer, rather than relying on the injectedReducer paradigm. Works well if you don't have too many reducers in play.

ilyausorov avatar Aug 01 '19 18:08 ilyausorov

any update?

Dylan0916 avatar Aug 03 '21 07:08 Dylan0916

is there any update?

kerituni12 avatar Apr 22 '22 16:04 kerituni12

any update?

PrakashC1 avatar Apr 11 '23 06:04 PrakashC1