redux-persist
redux-persist copied to clipboard
Dynamic injection reducer via Hook is not working
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
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?).
it will be great if you make PR
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.
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.
any update?
is there any update?
any update?