rt2zz / redux-persist

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

Dynamic injection reducer via Hook is not working #1028

Open abdullah-almesbahi opened 5 years ago

abdullah-almesbahi commented 5 years ago

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

ghost commented 5 years ago

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?).

abdullah-almesbahi commented 5 years ago

it will be great if you make PR

MuhammadSulman commented 5 years ago

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.

ilyausorov commented 5 years ago

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.

Dylan0916 commented 3 years ago

any update?

kerituni12 commented 2 years ago

is there any update?

PrakashC1 commented 1 year ago

any update?