El estado de React Redux se pierde al actualizar la página

Luego de mucho batallar hemos dado con el arreglo de este enigma que muchos usuarios de esta web han presentado. Si deseas compartir algún detalle no dudes en dejar tu información.

Solución:

Puede conservarlo fácilmente en el almacenamiento local. Compruebe el ejemplo a continuación.

const loadState = () => 
  try 
    const serializedState = localStorage.getItem('state');
    if(serializedState === null) 
      return undefined;
    
    return JSON.parse(serializedState);
   catch (e) 
    return undefined;
  
;

const saveState = (state) => 
  try 
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
   catch (e) 
    // Ignore write errors;
  
;

const peristedState = loadState();

store.subscribe(() => 
  saveState(store.getState());
);

const store = createStore(
  persistedState,
  // Others reducers...
);

render(
  
    
  ,
  document.getElementById('root');
);

---

La serialización es una operación costosa. Debe usar una función de aceleración (como la implementada por lodash) para limitar el número de guardados.

P.ej:

import throttle from 'lodash/throttle';

store.subscribe(throttle(() => 
  saveState(store.getState());
, 1000));

Puede usar algo como redux-persist para guardar el estado redux en local storage o a otro sistema de almacenamiento.

Al final de todo puedes encontrar las referencias de otros programadores, tú asimismo tienes el poder mostrar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador