Mantener datos del store en Redux.

Si recién haz terminado el curso de redux y react probablemente te diste cuenta que al recargar perdias todo tu store.

Al menos esto me sucedió a mi. recién comenzaba un proyecto en mi trabajo con HTML simple y un poco de NodeJS para conectarme al API que desarrolle. Mientras probaba note que si recargaba la pagina todo mi store perdía todo el store es decir, quedaba en blanco.

Buscando por internet un poco di con un video de Dan Abramov en una pagina donde se dedican a enseñar sobre Javascript egghead.io que su slogan es: “Learn the best JavaScript tools and frameworks from industry pros.”

Bien vamos a lo que vinimos, explicar como mantener nuestro store. Como nuestra aplicación la manejamos 100% en el front-end nuestro aliado es el localStorage. esto lo dividiremos en 3 partes.

• Definir nuestras funciones de saveState y loadState
• Definir en que momento se usa saveState
• Definir el momento donde usar loadState

Definiendo funciones saveState() y loadState()

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 fromJS(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.    
  }
}

Explicando algunos detalles

En el caso del este pequeño código habrán notado que hago uso del fromJS y el toJS esto para ajustarlo a nuestros ejemplos que vimos en clases y el uso de immutables debido a que el objeto que se guarda en localStorage debe ser un String si guardamos directamente nuestro store immutable será imposible leerlo como immutable nuevamente.

¿Donde debemos usar nuestro saveState()?

Para lograr mantener actualizado nuestro localStorage debemos escuchar cualquier cambió en nuestro state / store para esto usaremos nuestro método de store llamado suscribe() este nos permite ejecutar la función que le pasemos por parámetro cada vez que se actualice nuestro store

import {loadState, saveState} from 'nuestro/archivo/js'

store.subscribe( function () {
  saveState(store.getState())
})

De esta forma ya cada vez que actualicemos nuestro store actualizara nuestro *localStorage. Excelente ya lo podemos guardar y ahora…

¿Cuándo lo cargamos?

Debemos cargarlo antes de inicializar nuestro store quedando de la siguiente manera.

import {loadState, saveState} from 'nuestro/archivo/js'
import { createStore  } from 'redux'

const store = createStore(
  reducers,
  initialData,
  compose(
    applyMiddleware(thunk)
  )
)
store.subscribe( function () {
  saveState(store.getState())
})

Ya con esto podremos **cerrar, abrir, recargar ** nuestra pagina y nuestro state se mantendrá. Quedaría de parte de cada persona en su implementación decidir en que momento borrar el localStorage de la forma que más desee las principales son localStorage.removeItem(key); o reinicializando su store con los datos por defecto.

No soy bueno para escribir, pero quise compartir con ustedes esta pequeña guia de como mantener tus datos persistentes, seguramente habrá mil y un forma de hacerlo, pero esta me gusto y la aplique.

Sí gustas comunicarte conmigo para ampliar sobre este tema estoy a tu disposición en mi twitter @augustolzd

Saludos