reactjs - reducer - redux acciones

¿Cómo puedo persistir el árbol de estado redux en la actualización?

Question

El primer director de la documentación de Redux es:

El estado de toda su aplicación se almacena en un árbol de objetos dentro de una sola tienda.

Y en realidad pensé que entendía bien a todos los directores. Pero ahora estoy confundido qué significa la aplicación.

Si la aplicación significa solo una de las partes poco complicadas en el sitio web y funciona en una sola página, entiendo. Pero, ¿qué pasa si la aplicación significa todo el sitio web? ¿Debo usar LocalStorage o cookie o algo para mantener el árbol de estado? pero ¿qué pasa si el navegador no es compatible con LocalStorage?

¡Quiero saber cómo los desarrolladores mantienen su árbol de estado! :)

Answer 1

Editar 25-ago-2019

Como se indica en uno de los comentarios. El paquete original redux-storage se ha movido a react-stack . Este enfoque todavía se enfoca en implementar su propia solución de administración de estado.

Respuesta original

Si bien la respuesta proporcionada fue válida en algún momento, es importante notar que el paquete original de almacenamiento redux ha quedado en desuso y ya no se mantiene ...

El autor original del paquete redux-storage ha decidido desaprobar el proyecto y ya no lo mantiene.

Ahora, si no desea tener dependencias de otros paquetes para evitar problemas como estos en el futuro, es muy fácil implementar su propia solución.

Todo lo que necesitas hacer es:

1- Cree una función que devuelva el estado de localStorage y luego pase el estado a la función redux de createStore en el segundo parámetro para hidratar la tienda

 const store = createStore(appReducers, state);

2- Escuche los cambios de estado y cada vez que cambie el estado, guarde el estado en localStorage

store.subscribe(() => {
    //this is just a function that saves state to localStorage
    saveState(store.getState());
}); 

Y eso es todo ... en realidad uso algo similar en la producción, pero en lugar de usar funciones, escribí una clase muy simple como a continuación ...

class StateLoader {

    loadState() {
        try {
            let serializedState = localStorage.getItem("http://contoso.com:state");

            if (serializedState === null) {
                return this.initializeState();
            }

            return JSON.parse(serializedState);
        }
        catch (err) {
            return this.initializeState();
        }
    }

    saveState(state) {
        try {
            let serializedState = JSON.stringify(state);
            localStorage.setItem("http://contoso.com:state", serializedState);

        }
        catch (err) {
        }
    }

    initializeState() {
        return {
              //state object
            }
        };
    }
}

y luego al arrancar tu aplicación ...

import StateLoader from "./state.loader"

const stateLoader = new StateLoader();

let store = createStore(appReducers, stateLoader.loadState());

store.subscribe(() => {
    stateLoader.saveState(store.getState());
});

Espero que ayude a alguien

Nota de rendimiento

Si los cambios de estado son muy frecuentes en su aplicación, guardarlos en el almacenamiento local con demasiada frecuencia podría perjudicar el rendimiento de su aplicación, especialmente si el gráfico de objetos de estado para serializar / deserializar es grande. Para estos casos, es posible que desee eliminar el rebote o limitar la función que guarda el estado en localStorage usando RxJs , lodash o algo similar.

Answer 2

Esto se basa en la respuesta de Leo (que debería ser la respuesta aceptada, ya que cumple el propósito de la pregunta sin utilizar ninguna biblioteca de terceros).

Creé una clase Singleton que crea una Redux Store, la persiste utilizando el almacenamiento local y permite un acceso simple a su tienda a través de un getter .

Para usarlo, simplemente coloque el siguiente elemento Redux-Provider alrededor de su clase principal:

// ... Your other imports
import PersistedStore from "./PersistedStore";

ReactDOM.render(
  <Provider store={PersistedStore.getDefaultStore().store}>
    <MainClass />
  </Provider>,
  document.getElementById(''root'')
);

y agregue la siguiente clase a su proyecto:

import {
  createStore
} from "redux";

import rootReducer from ''./RootReducer''

const LOCAL_STORAGE_NAME = "localData";

class PersistedStore {

  // Singleton property
  static DefaultStore = null;

  // Accessor to the default instance of this class
  static getDefaultStore() {
    if (PersistedStore.DefaultStore === null) {
      PersistedStore.DefaultStore = new PersistedStore();
    }

    return PersistedStore.DefaultStore;
  }

  // Redux store
  _store = null;

  // When class instance is used, initialize the store
  constructor() {
    this.initStore()
  }

  // Initialization of Redux Store
  initStore() {
    this._store = createStore(rootReducer, PersistedStore.loadState());
    this._store.subscribe(() => {
      PersistedStore.saveState(this._store.getState());
    });
  }

  // Getter to access the Redux store
  get store() {
    return this._store;
  }

  // Loading persisted state from localStorage, no need to access
  // this method from the outside
  static loadState() {
    try {
      let serializedState = localStorage.getItem(LOCAL_STORAGE_NAME);

      if (serializedState === null) {
        return PersistedStore.initialState();
      }

      return JSON.parse(serializedState);
    } catch (err) {
      return PersistedStore.initialState();
    }
  }

  // Saving persisted state to localStorage every time something
  // changes in the Redux Store (This happens because of the subscribe() 
  // in the initStore-method). No need to access this method from the outside
  static saveState(state) {
    try {
      let serializedState = JSON.stringify(state);
      localStorage.setItem(LOCAL_STORAGE_NAME, serializedState);
    } catch (err) {}
  }

  // Return whatever you want your initial state to be
  static initialState() {
    return {};
  }
}

export default PersistedStore;

Answer 3

La pregunta original es

¡Quiero saber cómo los desarrolladores mantienen su árbol de estado! :)

Bueno, ya que no veo esta respuesta y usaste la etiqueta React; A menudo, las aplicaciones web React se implementan como un SPA (Aplicación de página única) que realmente no actualiza el navegador . Sin embargo, podrían hacer que parezca como si lo hicieran cambiando la URL que ve en la barra de direcciones. Una forma popular de hacer esto es react-router .

Pero aún así, un estado SPA no sobrevive a una actualización del navegador, por lo que es cuando entra redux-persist .

Answer 4

Si desea mantener su estado redux en una actualización del navegador, es mejor hacerlo utilizando el middleware redux. Vea el middleware redux-storage y redux-storage . Ambos intentan realizar la misma tarea de almacenar su estado redux para que pueda guardarse y cargarse a voluntad.

-

Editar

Ha pasado algún tiempo desde que volví a visitar esta pregunta, pero al ver que la otra (aunque la respuesta más votada) alienta a lanzar su propia solución, pensé que respondería esto nuevamente.

A partir de esta edición, ambas bibliotecas se han actualizado en los últimos seis meses. Mi equipo ha estado usando redux-persist en producción durante algunos años y no ha tenido problemas.

Si bien puede parecer un problema simple, rápidamente descubrirá que lanzar su propia solución no solo causará una carga de mantenimiento, sino que también provocará errores y problemas de rendimiento. Los primeros ejemplos que vienen a la mente son:

1. JSON.stringify y JSON.parse no solo pueden dañar el rendimiento cuando no es necesario, sino que arrojan errores que, cuando no se manejan en un código crítico como su tienda redux, pueden bloquear su aplicación.
2. (Se menciona parcialmente en la respuesta a continuación): averiguar cuándo y cómo guardar y restaurar el estado de su aplicación no es un problema simple. Hazlo con demasiada frecuencia y dañarás el rendimiento. No es suficiente, o si las partes incorrectas del estado persisten, puede encontrarse con más errores. Las bibliotecas mencionadas anteriormente se prueban en batalla en su enfoque y proporcionan algunas formas bastante infalibles de personalizar su comportamiento.
3. Parte de la belleza de redux (especialmente en el ecosistema React) es su capacidad de colocarse en múltiples entornos. A partir de esta edición, redux-persist tiene 15 implementaciones de almacenamiento diferentes , incluida la increíble biblioteca localForage para web, así como soporte para React Native, Electron y Node.

Para resumir, para 3kB minified + gzipped (en el momento de esta edición), este no es un problema, le pediría a mi equipo que se resuelva solo.