Como sincronizar uma loja Redux nas guias do navegador

Redux é uma maneira conveniente de gerenciar o estado em aplicativos da web complexos. Porém, sua loja Redux não está sincronizada entre guias, o que pode levar a alguns cenários estranhos. Se o usuário efetuar logout em uma guia, seria ideal que essa ação se refletisse em suas outras guias abertas.

Você pode adicionar sincronização de armazenamento de tabulação cruzada usando a biblioteca react-state-sync. Isso fornece um middleware que sincroniza automaticamente a loja nas guias. Você não precisa intervir manualmente no processo de sincronização após a configuração inicial.

Visão geral

A biblioteca Redux State Sync oferece um middleware Redux que você precisa adicionar à sua loja. Quando a loja recebe uma ação, o middleware despacha a mesma ação em todas as outras guias abertas em seu site.

Cada guia configura seu próprio ouvinte de mensagem para receber notificações de ação de entrada. Quando o ouvinte for notificado, ele enviará a ação para a loja da guia.

As mensagens são trocadas entre as guias usando a API Broadcast Channel. Este é um recurso do navegador que permite que guias da mesma origem se comuniquem entre si. Guias “ inscrever-se ” para “ canais. ” Eles são notificados pelo navegador quando outra guia posta uma mensagem em um canal inscrito.

O canal de transmissão está disponível apenas em navegadores mais recentes. Redux State Sync usa uma abstração que pode recorrer a tecnologias alternativas. Quando o canal de transmissão não é compatível, IndexedDB ou LocalStorage será usado em seu lugar.

O uso do canal de transmissão coloca algumas limitações no que você pode enviar entre as guias. Os dados enviados devem ser compatíveis com o algoritmo de clone estruturado do navegador. Isso inclui valores escalares, matrizes, objetos JavaScript simples e blobs. Valores complexos não serão transferidos exatamente.

Sincronizando sua loja

Para começar a usar Redux State Sync, adicione-o ao seu projeto via npm:

 npm install redux-state-sync 

A seguir, crie uma loja básica. Modificaremos este código em um momento para adicionar Redux State Sync.

import & # 123; createStore & # 125; de " redux & quot ;;   estado const = & # 123; autenticado: falso & # 125 ;;   redutor const = & # 40; estado, ação & # 41; = > & # 40; & # 123; ... estado, ... ação & # 125; & # 41 ;;   const store = createStore & # 40; redutor, estado & # 41 ;;

Agora temos uma loja simples. Para sincronizá-lo entre as guias, adicione o middleware Redux State Sync e configure um listener de mensagens.

import & # 123; createStore, applyMiddleware & # 125; de " redux & quot ;; import & # 123; createStateSyncMiddleware, initMessageListener & # 125; de " redux-state-sync & quot ;;   const reduxStateSyncConfig = & # 123; & # 125 ;;   redutor const = & # 40; estado, ação & # 41; = > & # 40; & # 123; ... estado, ... ação & # 125; & # 41 ;;   const store = createStore & # 40; redutor, estado, applyMiddleware & # 40; createStateSyncMiddleware & # 40; reduxStateSyncConfig & # 41; & # 41; & # 41 ;;   initMessageListener & # 40; store & # 41 ;;

A loja agora está pronta para ser usada em várias guias. Abra seu site em duas guias. Despache uma ação em uma das guias. Você deve ver a ação aparecer em ambas as lojas, efetuando a mudança de estado correspondente em cada uma. A extensão Redux DevTools pode ser usada para monitorar ações de entrada e as mudanças de estado que elas causam.

O middleware de sincronização de estado é criado usando a função de utilitário createStateSyncMiddleware (). Isso aceita um objeto de configuração usado para personalizar a operação do Redux State Sync &’ s. Veremos isso com mais detalhes na próxima seção.

Depois que o armazenamento é criado, ele é passado para initMessageListener (). Esta função garante que a escuta cruzada seja configurada. Sem essa chamada, as guias podem não receber novas ações se nenhuma ação for despachada no primeiro carregamento.

Usar initMessageListener () não dará à sua guia acesso ao armazenamento existente em outra guia. Quando o usuário abre uma nova guia, o padrão é ter sua própria loja nova. Se você deseja que as novas guias obtenham seu estado a partir de uma guia aberta, use a função initStateWithPrevTab ().

const store = createStore & # 40; reducer, state, applyMiddleware & # 40; createStateSyncMiddleware & # 40; & # 123; & # 125; & # 41; & # 41; & # 41 ;; initStateWithPrevTab & # 40; store & # 41 ;;

O estado da loja será substituído pelo estado existente se houver outra guia aberta disponível.

Sincronização personalizada

Redux State Sync suporta várias opções de configuração para permitir que você personalize a sincronização. Aqui estão algumas das configurações mais úteis. Cada um é definido como uma propriedade no objeto de configuração passado para createStateSyncMiddleware ().

Excluindo ações

Às vezes, você terá ações que não deseja sincronizar. Um exemplo poderia ser uma ação que faz com que um diálogo modal apareça. Provavelmente, você não deseja que esta caixa de diálogo apareça em todas as guias abertas do usuário!

Você pode excluir ações nomeadas específicas usando a opção de lista negra. Passe uma série de nomes de ação como o valor.

const config = & # 123; lista negra: & # 91; " DEMO_ACTION " & # 93; & # 125 ;;   // ...   // Isso não será sincronizado com nenhuma outra guia Store. dispatch & # 40; & # 123; type: " DEMO_ACTION " & # 125; & # 41 ;;

Você também pode usar uma lista de permissões em vez de uma lista de proibições. Defina a opção de configuração da lista de permissões para permitir que apenas ações predefinidas sejam sincronizadas.

Ações de filtragem precisa

Se nem a lista negra nem a lista branca fornecerem controle suficiente, defina a opção de predicado. Isso aceita uma função que é usada para filtrar ações sincronizáveis.

const config = & # 123; predicado: action = > & # 40; action. type! == " DEMO_ACTION " & # 41; & # 125 ;;

A função será chamada sempre que uma nova ação for recebida. Ele receberá a ação como um parâmetro. A função deve retornar verdadeiro ou falso para indicar se a ação deve ser sincronizada com outras guias. O exemplo acima sincronizará todas as ações, exceto DEMO_ACTION.

Configurações do canal de transmissão

Você pode alterar o nome do canal de transmissão definindo a propriedade do canal. O padrão é redux_state_sync. Normalmente você não deve precisar alterar isso, a menos que queira ter duas rotinas de sincronização separadas.

Você pode passar opções para a biblioteca de abstração do Broadcast Channel definindo broadcastChannelOption. Este deve ser um objeto de configuração aceito pela biblioteca pubkey / broadcast-channel.

Você pode usar isso para forçar o uso de uma tecnologia de armazenamento específica. Neste exemplo, a sincronização sempre ocorrerá via IndexedDB, mesmo se o navegador tiver suporte nativo para canais de transmissão.

const config = & # 123; broadcastChannelOption: & # 123; type: " idb " & # 125; & # 125 ;;

Integrando com Redux-Persist

Freqüentemente, você desejará usar o Redux State Sync em conjunto com o Redux Persist. Redux Persist é uma biblioteca popular que persiste automaticamente sua loja Redux no navegador.

Ao usar o Redux Persist, você não precisa usar a função initStateWithPrevTab () do Redux Persist. Em vez disso, use initMessageListener (), pois o estado inicial será sempre o estado persistente fornecido por Redux Persist.

Blacklist Redux Persiste ações dentro de sua configuração Redux State Sync. Eles não precisam ser sincronizados nas guias. Você deve sincronizar apenas as alterações que realmente afetam a loja, em vez de ações relacionadas ao seu ciclo de vida.

const config = & # 123; lista negra: & # 91; " persist / PERSIST ", " persist / REHYDRATE " & # 93; & # 125 ;;

Resumo

Redux State Sync permite que você sincronize as ações do usuário nas guias. Os aplicativos são virtualmente ilimitados e provavelmente melhorarão a experiência do usuário. Conforme os usuários realizam ações em seu site, elas serão refletidas imediatamente em suas outras guias abertas.

O “ clássico ” O caso de uso é sincronizar os resultados de login e logout. Porém, há outros benefícios também, como disponibilizar as notificações recebidas para todas as guias ou sincronizar as preferências do lado do cliente, como o tema de interface do usuário selecionado pelo usuário.

A biblioteca redux-state-sync minimizada pesa 19 KB. Com a configuração consistindo em apenas algumas linhas extras de código, você deve considerar adicionar Redux State Sync ao seu próximo projeto. Ele permite que você vincule guias em um todo coeso, em vez de fazê-las existir como entidades independentes.