Cómo conservar su tienda Redux


Ilustración que muestra el logotipo de Redux

Redux simplifica la gestión del estado en aplicaciones complejas. Dado que el archivo de Redux contiene todo el estado de su aplicación, conservarlo le permite guardar y restaurar la sesión del usuario.

Crea tu tienda

Asumiremos que está familiarizado con los fundamentos de Redux.

Para este tutorial, usaremos una tienda barebones con un reductor ingenuo.

import {createStore} from "redux";
 
const state = {authenticated: false};
 
const reducer = (state, action) => ({...state, ...action});
 
const store = createStore(reducer, state);

Este ejemplo trivial prepara el escenario para una tienda Redux que puede rastrear si estamos conectados. La mayoría de los usuarios esperarán permanecer conectados cuando regresen a su aplicación. Actualmente, el estado se crea nuevamente cada vez que se carga la aplicación, por lo que los usuarios solo serán autenticados dentro de la sesión actual.

Añadido Redux Persist

Redux persiste es una biblioteca popular que le permite agregar persistencia a la tienda. La biblioteca guardará automáticamente la tienda cada vez que se actualice el estado. No es necesario escribir ningún código de persistencia en acciones o reductores.

Comience instalando Redux Persist usando npm:

npm install redux-persist

Ahora necesitas vincular la biblioteca a tu tienda. Envuelva su reductor de raíz con Redux Persist's persistReducer función. Esto permite que Redux Persist inspeccione las acciones que envía a su tienda. También necesitarás llamar persistStore() para iniciar la persistencia.

import {createStore} from "redux";
import {persistStore, persistReducer} from "redux-persist";
import storage from "redux-persist/lib/storage";
 
const state = {authenticated: false};
 
const reducer = (state, action) => ({...state, ...action});
 
const persistConfig = {
    key: "root",
    storage
};
 
const persistedReducer = persistReducer(persistConfig, reducer);
 
const store = createStore(persistedReducer, state);
 
const persistor = persistStore(store);

Esta configuración ya está lista para su uso. Con solo unas pocas líneas de código, nos aseguramos de que cualquier cambio en el estado de Redux se conserve automáticamente. Los usuarios dejarán de cerrar sesión cada vez que vuelvan a cargar su aplicación.

Nuestro reductor está enriquecido con persistReducer() para incluir el apoyo a la persistencia. Este reductor recién envuelto se pasa luego a createStore() en lugar del original. Finalmente, persistStore() se llama, pasando la instancia de la tienda, para habilitar la persistencia.

Configuración de Redux Persist

los persistReducer() la función acepta un objeto de configuración como primer parámetro. Debes especificar el archivo key es storage propiedad.

key establece el nombre de la propiedad de nivel superior en el objeto persistente. El estado de su tienda se guardará como el valor de esta propiedad.

storage define el motor de almacenamiento que se utilizará. Redux Persist admite varios archivos backend de almacenamiento dependiendo del medio ambiente. Para uso web, el localStorage es sessionStorage Las API son compatibles al igual que las cookies básicas. También hay opciones para React Native, Node.js, Electron y muchas otras plataformas.

Usted define el motor de almacenamiento a utilizar importándolo desde su paquete. Por lo tanto, su principal objeto de implementación de API debe pasar storage opción para Redux Persist.

Puede implementar su propio motor de almacenamiento para utilizar un mecanismo de persistencia personalizado. Crea un objeto con setItem(), getItem() es removeItem() métodos. Redux Persist es asincrónico, por lo que cada método debe devolver una Promesa que se resuelve al final de la operación.

El objeto Persistor

los persistor artículo devuelto de persistStore() call tiene algunos métodos de utilidad que le permiten manejar la persistencia.

Puede pausar y reanudar la persistencia utilizando el archivo pause() es resume() métodos respectivamente. Puede forzar una escritura inmediata en el motor de almacenamiento con flush(). Esto puede resultar útil si necesita asegurarse de que su estado se mantenga después de una operación en particular.

Puede eliminar todos los datos persistentes del motor de almacenamiento utilizando .purge(). En la mayoría de los casos, esto debe evitarse: debe usar una acción de Redux para eliminar su tienda, que se propagaría automáticamente a los datos persistentes.

Reconciliación estatal

Redux Persist admite tres formas diferentes de hidratar su almacén de estado persistente. La hidratación ocurre automáticamente cuando llamas persistStore() y los datos existentes están en el motor de almacenamiento. Redux Persist necesita inyectar esos datos iniciales en su tienda.

La estrategia predeterminada es unir objetos a un nivel de profundidad. Todos los objetos anidados no se fusionarán; el cambio entrante sobrescribirá todo lo que ya esté en su estado.

  • Estado persistente: {"demo": {"foo": "bar"}}
  • Estado en la tienda: {"demo": {"example": test"}}
  • Reserva hidratada resultante: {"demo": {"foo": "bar"}}

Opcionalmente, puede cambiar a mezclar objetos a niveles más profundos. Importe el nuevo reconciliador de estado y agréguelo a la configuración de su tienda:

// usual imports omitted
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 
const persistConfig = {
    key: "root",
    storage,
    stateReconciler: autoMergeLevel2
};
 
// store configuration omitted

Este es el resultado autoMergeLevel2 sería cuando hidratas el ejemplo anterior:

  • Estado persistente: {"demo": {"foo": "bar"}}
  • Estado en la tienda: {"demo": {"example": test"}}
  • Reserva hidratada resultante: {"demo": {"foo": "bar", "example": "test"}}

Los valores de demo las propiedades de las dos fuentes se unen en hidratación.

Utilizar el hardSet reconciliador si desea deshabilitar la fusión por completo. Esto reemplazará el estado de la tienda con el contenido del motor de almacenamiento. Esto a menudo no es deseable ya que complica las migraciones: si agrega una nueva propiedad inicial a su estado, no se configurará para los usuarios existentes tan pronto como su sesión se hidrate.

Migración de tu estado

Cuando se trata de migraciones, Redux Persist tiene soporte incorporado para actualizar el estado persistente a una nueva versión. A veces, puede reemplazar propiedades con alternativas más nuevas. Debe asegurarse de que los usuarios existentes no tengan que restablecer su aplicación para continuar usándola.

Las migraciones se configuran mediante el migrate clave de configuración. El enfoque más simple es pasar una función que toma el estado como parámetro y devuelve el estado migrado. También necesita configurar el archivo version clave de configuración para que Redux Persist pueda identificar cuándo se necesitan migraciones. Cada vez que el version cambios, se llamará a la función de migración.

const persistConfig = {
    key: "root",
    storage,
    version: 1,
    migrate: (state) => ({...state, oldProp: undefined, newProp: "foobar"});
};

Como alternativa al enfoque basado en funciones, puede pasar un objeto que permite la creación de funciones de migración individuales para cada paso de la versión. Esto debe transmitirse a createMigrate() antes de pasar a la configuración de Redux Persist.

// other imports omitted
import {createMigrate} from "redux-persist";
 
const migrations = {
    1: state => ({...state, extraProp: true}),
    2: state => ({...state, extraProp: undefined, extraPropNew: true})
};
 
const persistConfig = {
    key: "root",
    storage,
    version: 2,
    migrate: createMigrate(migrations)
}

En este ejemplo, inicializamos la tienda como versión 2. Si el estado ya existía en el dispositivo del usuario como versión 0, se realizarían ambas migraciones. Si el usuario estaba actualmente en la versión 1, solo se realizará la última migración.

Aplicación de transformaciones

Un último punto a mencionar es que Redux Persist admite el uso de funciones de "transformación". Estos se agregan a la configuración y le permiten manipular los datos guardados o restaurados.

los documentación de la biblioteca enumera varias transformaciones populares que puede utilizar. Estos le permiten comprimir, cifrar o caducar automáticamente el estado persistente, sin tener que implementar ninguna lógica a nivel de aplicación usted mismo.

Las transformaciones se especifican como una matriz en el objeto de configuración. Se realizan en el orden indicado.

const persistStore = {
    key: "root",
    storage,
    transforms: [MyTransformer]
};

Para escribir su transformador, use el archivo createTransform() función. Se pasan dos funciones y un objeto de configuración:

import {createTransform} from "redux-persist";
 
const MyTransformer = createTransform(
    (inboundState, key) => ({...inboundState, b64: btoa(inboundState.b64)}),
    (outboundState, key) => ({...outboundState, b64: atob(outboundState.b64)}),
    {}
);

En este ejemplo, archivamos el archivo b64 propiedad de nuestro estado como un valor codificado en Base64. Cuando los datos se almacenan en la memoria (outboundState), el valor está codificado. Se decodifica cuando se hidrata el estado persistente (inboundState).

El objeto de configuración se puede utilizar para definir un archivo. whitelist es blacklist de nombres de caja de cambios. Por lo tanto, el transformador solo se utilizará con cajas de engranajes que cumplan estas restricciones.

Conclusión

Redux Persist es una biblioteca poderosa con una interfaz simple. Puede configurar la persistencia automática de su tienda Redux en solo unas pocas líneas de código. Tanto los usuarios como los desarrolladores agradecerán su conveniencia.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir