Traté de implementar Redux-Persist y este es el código que escribí:

 import { createStore, combineReducers } from 'redux'; import { usersReducer } from './users'; import { eventsReducer } from './events'; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; const persistConfig = { key: 'root', storage } const reducer = combineReducers({ users: usersReducer, events: eventsReducer }) const persistedReducer = persistReducer(persistConfig, reducer); const store = createStore(persistedReducer); const persistor = persistStore(store); export { store, persistor };

Mi archivo store.js :

 import { createStore, combineReducers } from 'redux'; import { usersReducer } from './users'; import { eventsReducer } from './events'; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; const persistConfig = { key: 'root', storage } const reducer = combineReducers({ users: usersReducer, events: eventsReducer }) const persistedReducer = persistReducer(persistConfig, reducer); const store = createStore(persistedReducer); const persistor = persistStore(store); export { store, persistor };

Mi archivo usersReducer.js ( eventsReducer.js está construido como este):

 const initialState = { loggedIn: false, thisUser: [] } export function usersReducer(state = initialState, action) { switch (action.type) { case 'users/loggedIn': return { ...state, loggedIn: action.payload } case 'users/addUser': return { ...state, thisUser: action.payload[0] } case 'users/setActivated': return { ...state, thisUser: { ...state.thisUser, activated: action.payload } } case 'clearAll': return { thisUser: [] } default: return state } }

Mi archivo index.js :

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { Provider } from 'react-redux' import { store, persistor } from './store/store'; import { PersistGate } from 'redux-persist/integration/react' ReactDOM.render( <Provider store={store}> <PersistGate persistor={persistor}> <App /> </PersistGate> </Provider>, document.getElementById('root') );

Mi problema es : Redux-Persist funciona y se guarda en localStorage, pero cuando actualizo la página, mis datos guardados en localStorage con Redux-Persist no actualizan mi estado local y estarán vacíos. Creo que en cualquier actualización de la página debería obtener datos persistentes de localStorage y enviarlos de vuelta a mi estado Redux.

No se si es correcto lo que digo pero necesito ayuda para solucionar este problema.