Comment synchroniser un magasin Redux entre les onglets du navigateur –

Redux est un moyen pratique de gérer l’état dans des applications Web complexes. Votre boutique Redux n’est cependant pas synchronisée entre les onglets, ce qui peut conduire à des scénarios délicats. Si l’utilisateur se déconnecte dans un onglet, il serait idéal que cette action soit reflétée dans ses autres onglets ouverts.

Vous pouvez ajouter une synchronisation de magasin multi-onglets à l’aide de la bibliothèque react-state-sync. Cela fournit un middleware qui synchronise automatiquement le magasin entre les onglets. Vous n’avez pas besoin d’intervenir manuellement dans le processus de synchronisation après la configuration initiale.

Aperçu

La bibliothèque Redux State Sync propose un middleware Redux que vous devez ajouter à votre boutique. Lorsque le magasin reçoit une action, le middleware envoie la même action dans tous les autres onglets ouverts sur votre site.

Chaque onglet configure son propre écouteur de messages pour recevoir les notifications d’action entrantes. Lorsque l’auditeur est averti, il distribuera l’action dans le magasin de l’onglet.

Les messages sont échangés entre les onglets à l’aide de l’API Broadcast Channel. Il s’agit d’une fonction de navigateur qui permet aux onglets de la même origine de communiquer entre eux. Onglets « s’abonner » aux « chaînes ». Ils sont avertis par le navigateur lorsqu’un autre onglet publie un message sur une chaîne abonnée.

Le canal de diffusion n’est disponible que dans les navigateurs plus récents. Redux State Sync utilise une abstraction qui peut se replier sur des technologies alternatives. Lorsque le canal de diffusion n’est pas pris en charge, IndexedDB ou LocalStorage sera utilisé à la place.

L’utilisation de Broadcast Channel impose certaines limites à ce que vous pouvez envoyer entre les onglets. Les données que vous envoyez doivent être prises en charge par l’algorithme de clonage structuré du navigateur. Cela inclut les valeurs scalaires, les tableaux, les objets JavaScript simples et les objets blob. Les valeurs complexes ne seront pas transférées exactement.

Synchroniser votre boutique

Pour commencer à utiliser Redux State Sync, ajoutez-le à votre projet via npm:

npm install redux-state-sync

Ensuite, créez un magasin de base. Nous modifierons ce code dans un instant pour ajouter Redux State Sync.

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

Maintenant, nous avons un magasin simple. Pour le synchroniser entre les onglets, ajoutez le middleware Redux State Sync et configurez un écouteur de messages.

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);

Le magasin est maintenant prêt à être utilisé sur plusieurs onglets. Ouvrez votre site dans deux onglets. Distribuez une action dans l’un des onglets. Vous devriez voir l’action apparaître dans les deux magasins, effectuant le changement d’état correspondant dans chacun. L’extension Redux DevTools peut être utilisée pour surveiller les actions entrantes et les changements d’état qu’elles provoquent.

L’intergiciel de synchronisation d’état est créé à l’aide du createStateSyncMiddleware() fonction d’utilité. Cela accepte un objet de configuration utilisé pour personnaliser le fonctionnement de Redux State Sync. Nous examinerons cela de plus près dans la section suivante.

Une fois le magasin créé, il est transmis à initMessageListener(). Cette fonction garantit la configuration de l’écoute croisée. Sans cet appel, les onglets peuvent ne pas recevoir de nouvelles actions si aucune action n’a été distribuée lors du premier chargement.

Utilisant initMessageListener() ne donnera pas à votre onglet l’accès à la boutique existante détenue dans un autre onglet. Lorsque l’utilisateur ouvre un nouvel onglet, il aura par défaut sa propre boutique fraîche. Si vous souhaitez que les nouveaux onglets obtiennent leur état à partir d’un onglet ouvert, utilisez le initStateWithPrevTab() fonction à la place.

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

L’état du magasin sera remplacé par l’état existant s’il existe un autre onglet ouvert disponible.

Synchronisation personnalisée

Redux State Sync prend en charge plusieurs options de configuration pour vous permettre de personnaliser la synchronisation. Voici quelques-uns des paramètres les plus utiles. Chacun est défini comme une propriété dans l’objet de configuration passé à createStateSyncMiddleware().

Exclure les actions

Parfois, vous aurez des actions que vous ne souhaitez pas synchroniser. Un exemple pourrait être une action qui fait apparaître une boîte de dialogue modale. Il y a de fortes chances que vous ne vouliez pas que cette boîte de dialogue apparaisse dans tout les onglets ouverts de l’utilisateur!

Vous pouvez exclure des actions nommées spécifiques à l’aide du blacklist option. Passez un tableau de noms d’action comme valeur.

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

Vous pouvez également utiliser une liste blanche au lieu d’une liste noire. Met le whitelist config pour autoriser uniquement la synchronisation des actions prédéfinies.

Filtrage précis des actions

Si ni l’un ni l’autre blacklist ou whitelist vous donne suffisamment de contrôle, réglez le predicate option. Cela accepte une fonction qui est utilisée pour filtrer les actions synchronisables.

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

La fonction sera appelée à chaque fois qu’une nouvelle action est reçue. Il recevra l’action en tant que paramètre. La fonction doit retourner true ou false pour indiquer si l’action doit être synchronisée avec d’autres onglets. L’exemple ci-dessus synchronisera toutes les actions sauf DEMO_ACTION.

Paramètres de canal de diffusion

Vous pouvez modifier le nom du canal de diffusion en définissant le channel biens. Il est par défaut redux_state_sync. Vous ne devriez généralement pas avoir besoin de changer cela à moins que vous ne souhaitiez avoir deux routines de synchronisation distinctes.

Vous pouvez transmettre des options à la bibliothèque d’abstraction du canal de diffusion en définissant broadcastChannelOption. Il doit s’agir d’un objet de configuration accepté par le pubkey/broadcast-channel une bibliothèque.

Vous pouvez l’utiliser pour forcer l’utilisation d’une technologie de stockage particulière. Dans cet exemple, la synchronisation se produira toujours via IndexedDB, même si le navigateur prend en charge nativement les canaux de diffusion.

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

Intégration avec Redux-Persist

Vous voudrez souvent utiliser Redux State Sync en conjonction avec Redux Persist. Redux Persist est une bibliothèque populaire qui persiste automatiquement votre boutique Redux dans le navigateur.

Lorsque vous utilisez Redux Persist, vous n’avez pas besoin d’utiliser Redux Persist initStateWithPrevTab() une fonction. Utilisation initMessageListener() à la place, comme l’état initial sera toujours l’état persistant fourni par Redux Persist.

Blacklist Redux Persist actions dans votre configuration Redux State Sync. Ceux-ci n’ont pas besoin d’être synchronisés entre les onglets. Vous ne devez synchroniser que les modifications qui affectent réellement le magasin, plutôt que les actions liées à son cycle de vie.

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

Résumé

Redux State Sync vous permet de synchroniser les actions des utilisateurs entre les onglets. Les applications sont pratiquement illimitées et sont susceptibles d’améliorer l’expérience utilisateur. À mesure que les utilisateurs effectuent des actions sur votre site, ils seront immédiatement reflétés dans leurs autres onglets ouverts.

Le cas d’utilisation «classique» est la synchronisation des résultats de connexion et de déconnexion. Il existe également d’autres avantages, tels que la mise à disposition des notifications entrantes dans tous les onglets ou la synchronisation des préférences côté client comme le thème d’interface utilisateur sélectionné par l’utilisateur.

La bibliothèque minifiée redux-state-sync pèse 19 Ko. Avec une configuration composée de quelques lignes de code supplémentaires, vous devriez envisager d’ajouter Redux State Sync à votre prochain projet. Il vous permet de lier les onglets ensemble dans un tout cohérent, au lieu de les faire exister en tant qu’entités indépendantes.