Cómo sincronizar una tienda Redux entre pestañas del navegador


Ilustración que muestra el logotipo de Redux

Redux es una forma conveniente de administrar el estado en aplicaciones web complejas. Sin embargo, su tienda Redux no está sincronizada entre pestañas, lo que puede llevar a algunos escenarios incómodos. Si el usuario cierra sesión en una pestaña, lo ideal sería que esa acción se refleje en las otras pestañas abiertas.

Puede agregar sincronización de archivos de tabla de referencias cruzadas utilizando el archivo reaccionar-estado-sincronización Biblioteca. Esto proporciona middleware que sincroniza automáticamente la tienda entre las tarjetas. No es necesario intervenir manualmente en el proceso de sincronización después de la configuración inicial.

Visión de conjunto

La biblioteca Redux State Sync ofrece middleware Redux que necesita agregar a su tienda. Cuando la tienda recibe una acción, el middleware enviará la misma acción en todas las demás pestañas abiertas de su sitio.

Cada pestaña establece su propio receptor de mensajes para recibir notificaciones de acciones entrantes. Cuando el oyente recibe una notificación, enviará la acción al archivo de la tarjeta.

Los mensajes se intercambian entre tarjetas utilizando el API de canal de transmisión. Esta es una función del navegador que permite que las pestañas de la misma fuente se comuniquen entre sí. Las pestañas "suscribirse" a "canales". Reciben una notificación del navegador cuando otra pestaña envía un mensaje a un canal al que están suscritos.

Broadcast Channel solo está disponible en los navegadores más recientes. Redux State Sync utiliza una abstracción que puede recurrir a tecnologías alternativas. Cuando no se admite el canal de transmisión, se utilizará IndexedDB o LocalStorage.

El uso del canal de transmisión impone algunas limitaciones sobre lo que puede enviar entre tarjetas. Los datos enviados deben ser compatibles con el navegador. algoritmo de clon estructurado. Esto incluye valores escalares, matrices, objetos JavaScript simples y BLOB. Los valores complejos no se transferirán exactamente.

Sincronización de tu tienda

Para comenzar a usar Redux State Sync, agréguelo a su proyecto a través de npm:

npm install redux-state-sync

Entonces, crea una tienda básica. Modificaremos este código en un momento para agregar Redux State Sync.

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

Ahora tenemos una tienda sencilla. Para sincronizarlo entre pestañas, agregue el middleware Redux State Sync y configure un detector de mensajes.

import {createStore, applyMiddleware} from "redux";
import {createStateSyncMiddleware, initMessageListener} from "redux-state-sync";
 
const reduxStateSyncConfig = {};
 
const reducer = (state, action) => ({...state, ...action});
 
const store = createStore(
    reducer,
    state,
    applyMiddleware(createStateSyncMiddleware(reduxStateSyncConfig))
);
 
initMessageListener(store);

La tienda ya está lista para usarse en todas las pestañas. Abra su sitio en dos pestañas. Envíe una acción en una de las pestañas. Debería ver aparecer la acción en ambas tiendas, haciendo el cambio de estado correspondiente en cada una. El Redux DevTools La extensión se puede usar para monitorear las acciones entrantes y los cambios de estado que causan.

El middleware de sincronización de estado se crea utilizando el createStateSyncMiddleware() función útil. Acepta un objeto de configuración utilizado para personalizar el comportamiento de Redux State Sync. Lo veremos más de cerca en la siguiente sección.

Una vez creada la tienda, se pasa a initMessageListener(). Esta función asegura la configuración de escucha de tabla cruzada. Sin esta llamada, es posible que las tarjetas no reciban nuevas acciones si no se envió ninguna acción en la primera carga.

Usando initMessageListener() no permitirá que su anuncio acceda a la tienda existente almacenada en otro anuncio. Cuando el usuario abre una nueva pestaña, tendrá su propia tienda nueva por defecto. Si desea que las pestañas nuevas obtengan su estado desde una pestaña abierta, use el initStateWithPrevTab() función en su lugar.

const store = createStore(reducer, state, applyMiddleware(createStateSyncMiddleware({})));
initStateWithPrevTab(store);

El estado de la tienda será reemplazado por el estado existente si hay otra pestaña abierta disponible.

Sincronización personalizada

Redux State Sync admite varias opciones de configuración para permitirle personalizar la sincronización. Estas son algunas de las configuraciones más útiles. Cada uno se establece como una propiedad en el objeto de configuración que se pasa a createStateSyncMiddleware().

Exclusión de acciones

A veces, tendrá acciones que no desea sincronizar. Un ejemplo sería una acción que abre un cuadro de diálogo modal. Lo más probable es que no desee que aparezca este cuadro de diálogo todo el usuario abre pestañas!

Puede excluir acciones específicas con nombre usando el archivo blacklist opción. Pase una matriz de nombres de acciones como valor.

const config = {
    blacklist: ["DEMO_ACTION"]
};
 
// ...
 
// This won't be synced to any other tabs
Store.dispatch({type: "DEMO_ACTION"});

También puede utilizar una lista blanca en lugar de una lista negra. Selecciona el whitelist config para permitir la sincronización de acciones predefinidas únicamente.

Acciones de filtrado precisas

Si ninguno blacklist o whitelist darle suficiente control, configure el predicate opción. Acepta una función que se utiliza para filtrar las acciones sincronizables.

const config = {
    predicate: action => (action.type !== "DEMO_ACTION")
};

La función se llamará cada vez que se reciba una nueva acción. Tomará la acción como parámetro. La función debería regresar true o false para indicar si la acción debe sincronizarse con otras pestañas. El ejemplo anterior sincronizará todas las acciones excepto DEMO_ACTION.

Configuración del canal de transmisión

Puede cambiar el nombre del canal de transmisión configurando el channel propiedad. El valor predeterminado es redux_state_sync. Por lo general, no debería necesitar cambiar esto a menos que desee tener dos rutinas de sincronización separadas.

Puede pasar opciones a la biblioteca de abstracción del canal de transmisión configurando broadcastChannelOption. Este debe ser un objeto de configuración aceptado por pubkey/broadcast-channel Biblioteca.

Puede usarlo para forzar el uso de una tecnología de almacenamiento en particular. En este ejemplo, la sincronización siempre ocurrirá a través de IndexedDB, incluso si el navegador tiene soporte nativo para canales de transmisión.

const config = {
    broadcastChannelOption: {type: "idb"}
};

Integración con Redux-Persist

A menudo recomendamos que utilice Redux State Sync junto con Redux Persist. Redux Persist es una biblioteca popular que mantiene automáticamente su tienda Redux en el navegador.

Al usar Redux Persist, no es necesario usar Redux Persist initStateWithPrevTab() función. Usar initMessageListener() en cambio, dado que el estado inicial siempre será el estado persistente proporcionado por Redux Persist.

Lista negra de acciones de Redux Persist dentro de la configuración de Redux State Sync. No es necesario sincronizarlos entre pestañas. Solo se deben sincronizar los cambios que realmente afectan a la tienda, en lugar de las acciones relacionadas con su ciclo de vida.

const config = {
    blacklist: ["persist/PERSIST", "persist/REHYDRATE"]
};

Resumen

Redux State Sync le permite sincronizar las acciones del usuario entre pestañas. Las aplicaciones son prácticamente ilimitadas y probablemente mejorarán la experiencia del usuario. A medida que los usuarios realicen acciones en su sitio, se reflejarán inmediatamente en las otras pestañas abiertas.

El caso de uso "clásico" es sincronizar los resultados de inicio de sesión y cierre de sesión. También hay otros beneficios, como hacer que las notificaciones entrantes estén disponibles para todas las pestañas o sincronizar las preferencias del lado del cliente, como el tema de la interfaz de usuario seleccionado por el usuario.

El biblioteca minificada de redux-state-sync pesa 19 KB. Con la instalación que consta de algunas líneas adicionales de código, debería considerar agregar Redux State Sync a su próximo proyecto. Le permite vincular los tableros en un todo coherente, en lugar de hacer que existan como entidades independientes.

Deja una respuesta

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

Subir