Как синхронизировать магазин Redux между вкладками браузера

Redux — это удобный способ управления состоянием в сложных веб-приложениях. Однако ваш магазин Redux не синхронизируется между вкладками, что может привести к некоторым неловким сценариям. Если пользователь выходит из системы на одной вкладке, было бы идеально, если бы это действие отражалось на других его открытых вкладках.

Вы можете добавить синхронизацию хранилища кросс-таблиц с помощью библиотеки react-state-sync. Это обеспечивает промежуточное ПО, которое автоматически синхронизирует хранилище между вкладками. Вам не нужно вручную вмешиваться в процесс синхронизации после первоначальной настройки.

Обзор

Библиотека Redux State Sync предлагает промежуточное ПО Redux, которое вам необходимо добавить в свой магазин. Когда магазин получает действие, промежуточное ПО отправит такое же действие на любые другие вкладки, открытые на вашем сайте.

Каждая вкладка настраивает собственный прослушиватель сообщений для получения уведомлений о входящих действиях. Когда слушатель уведомлен, он отправит действие в хранилище вкладки.

Обмен сообщениями между вкладками осуществляется с помощью Broadcast Channel API. Это функция браузера, которая позволяет вкладкам из одного источника взаимодействовать друг с другом. Вкладки «подписаться» на «каналы». Браузер уведомляет их, когда другая вкладка публикует сообщение на подписанный канал.

Broadcast Channel доступен только в новых браузерах. Redux State Sync использует абстракцию, которая может использовать альтернативные технологии. Если широковещательный канал не поддерживается, вместо него будет использоваться IndexedDB или LocalStorage.

Использование широковещательного канала накладывает некоторые ограничения на то, что вы можете отправлять между вкладками. Данные, которые вы отправляете, должны поддерживаться алгоритмом структурированного клонирования браузера. Сюда входят скалярные значения, массивы, простые объекты JavaScript и большие двоичные объекты. Комплексные значения не будут переданы точно.

Синхронизация вашего магазина

Чтобы начать использовать Redux State Sync, добавьте его в свой проект через npm:

npm install redux-state-sync

Затем создайте базовый магазин. Мы изменим этот код через мгновение, чтобы добавить Redux State Sync.

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

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

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

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

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

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

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