0

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:

sin recargar la pagina

y así se ve el console.log después de recargar la página, las propiedades están contenidas en otra propiedad llamada nodes

introducir la descripción de la imagen aquí

Mi state luce igual tanto sin recargar como recargando la página

introducir la descripción de la imagen aquí

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?

1 respuesta 1

1

Lo que te está ocurriendo es lo siguiente:

EL objeto inicial es un objeto plano de javascript como se muestra en tu primera imagen, sin embargo en la segunda es un Map().

No veo en tu código donde estás haciendo esa conversión aunque sí veo 2 cosas:

Importas en tu fichero: (aunque no veo donde lo usas)

import {fromJS} from 'immutable'

Cuando lo tratas de guardar en localStorage, parece que estás manejando un objeto de la libreria "Immutable" (Map)

JSON.stringify(state.toJS()

Te recomiendo que revises donde estás cambiando el tipo de datos y lo unifiques, o bien usando immutable desde el inicio o bien quitándolo de la actualización.. Espero te sirva, saludos.

4
  • Me ha aclarado un poco, pero tengo la pregunta de cómo podría convertir el loadState en un objeto plano JS, pensaba usar fromJS pero no encuentro una forma para convertir ese objeto en lo que necesito Commented el 15 nov. 2019 a las 23:20
  • Lo consigues sustituyendo en tu fichero configureStore la linea fromJS(initialData) por simplemente initialData. Commented el 16 nov. 2019 a las 8:53
  • Al hacer eso, me retorna: The previous state received by the reducer is of unexpected type. Expected argument to be an instance of Immutable.Collection or Immutable Commented el 16 nov. 2019 a las 16:48
  • Hasta donde yo se, redux no te obliga a usar “immutable” lo debes estar forzando por configuracion en algún punto de tu código. También podrías usar immutable para el resto de la aplicación si te es más fácil. Commented el 16 nov. 2019 a las 16:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.