tengo un problema y espero puedan ayudarme. Hice una implementación de redux y usando el local storage logré que al recargar la pagina los datos se mantengan. Los puedo ver desde la extensión de redux.
El problema está en que al acceder a esas propiedades después de haberse recargado la página se pierde, o mejor dicho, llegan en una forma distinta. Para más claridad, así se ven las propiedades sin haber recargado la pagina haciendo un console.log
desde el componente:
y así se ve el console.log
después de recargar la página, las propiedades están contenidas en otra propiedad llamada nodes
Mi state luce igual tanto sin recargar como recargando la página
La implementación de load y save state es la siguiente:
import {fromJS} from 'immutable'
export const loadState = () => {
try {
const serializedData = localStorage.getItem('state')
if (serializedData === null){
return undefined // Si no existe el state en el local storage devolvemos undefined para que cargue el state inicial que hayamos definido
}
return (JSON.parse(serializedData)) // Si encontramos con exito nuestro storage lo devolvemos.
} catch (error) {
return undefined // Si ocurre algun error, devuelvo undefined para cargar el state inicial.
}
}
export const saveState = (state) => {
try {
let serializedData = JSON.stringify(state.toJS())
localStorage.setItem('state', serializedData)
} catch (error) {
// Acá podemos capturar o crear cualquier log que deseemos en caso de que falle el salvado en el storage.
}
}
y mi configureStore luce así:
import { createStore, applyMiddleware, compose } from 'redux';
import { fromJS } from 'immutable';
import { routerMiddleware } from 'connected-react-router/immutable';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
import sagas from '../utils/sagas';
import {loadState, saveState} from '../storage/index'
const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState ={}, history) {
const middlewares = [sagaMiddleware, routerMiddleware(history)];
const enhancers = [applyMiddleware(...middlewares)];
const initialData = loadState();
const composeEnhancers = process.env.NODE_ENV !== 'production'
&& typeof window === 'object'
&& window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
shouldHotReload: false,
})
: compose;
/* eslint-enable */
const store = createStore(
createReducer(),
fromJS(initialData),
composeEnhancers(...enhancers),
);
store.subscribe(function(){
saveState(store.getState())
})
// Extensions
sagaMiddleware.run(sagas);
store.injectedReducers = {}; // Reducer registry
store.injectedSagas = {}; // Saga registry
return store ;
}
Pienso que puede ser el formato en el que se carga el loadState()
pero no entiendo porqué en la extensión de redux se ve el state exactamente igual que sin recargar. ¿Alguna sugerencia o cómo podría corregir esto?