Como Persistir Sua Loja Redux

Redux simplifica o gerenciamento de estado em aplicativos complexos. Como a loja Redux contém o estado inteiro do seu aplicativo, persistir permite que você salve e restaure a sessão do usuário.

Criando sua loja

Presumiremos que você está familiarizado com os fundamentos do Redux.

Para este tutorial, usaremos uma loja barebones com um redutor ingênuo.

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

Este exemplo trivial define o cenário para uma loja Redux que pode rastrear se estamos conectados novamente. A maioria dos usuários espera permanecer conectada quando retornam ao seu aplicativo. No momento, o estado é criado novamente cada vez que o aplicativo é carregado, então os usuários permanecerão autenticados apenas na sessão atual.

Adicionando Redux Persist

Redux Persist é uma biblioteca popular que permite adicionar persistência à loja. A biblioteca salvará automaticamente o armazenamento sempre que o estado for atualizado. Você não precisa escrever nenhum código de persistência em suas ações ou redutores.

Comece instalando Redux Persist usando npm:

 npm install redux-persist 

Agora você precisa conectar a biblioteca à sua loja. Envolva seu redutor de raiz usando a função persistReducer do Redux Persist. Isso permite que o Redux Persist inspecione as ações que você despacha para sua loja. Você também precisará chamar persistStore () para iniciar a persistência.

import & # 123; createStore & # 125; de " redux & quot ;; import & # 123; persistStore, persistReducer & # 125; de " redux-persist & quot ;; importar armazenamento de " redux-persist / lib / storage & quot ;;   estado const = & # 123; autenticado: falso & # 125 ;;   redutor const = & # 40; estado, ação & # 41; = > & # 40; & # 123; ... estado, ... ação & # 125; & # 41 ;;   const persistConfig = & # 123; chave: " root & quot ;, armazenamento & # 125 ;;   const persistedReducer = persistReducer & # 40; persistConfig, reducer & # 41 ;;   const store = createStore & # 40; persistedReducer, state & # 41 ;;   const persistor = persistStore & # 40; store & # 41 ;;

Esta configuração agora está pronta para uso. Com apenas algumas linhas de código, garantimos que todas as alterações de estado do Redux serão mantidas automaticamente. Os usuários deixarão de ser desconectados sempre que recarregarem seu aplicativo.

Nosso redutor é aprimorado por persistReducer () para incluir suporte de persistência. Este redutor recém-empacotado é então passado para createStore () em vez do original. Finalmente, persistStore () é chamado, passando na instância de armazenamento, para habilitar a persistência.

Configurando Redux Persist

A função persistReducer () aceita um objeto de configuração como seu primeiro parâmetro. Você deve especificar a chave e as propriedades de armazenamento.

A chave

define o nome da propriedade de nível superior no objeto persistente. O estado da sua loja será salvo como o valor desta propriedade.

armazenamento define o mecanismo de armazenamento a ser usado. Redux Persist oferece suporte a vários back-ends de armazenamento diferentes, dependendo do ambiente. Para uso na web, as APIs localStorage e sessionStorage são suportadas, bem como cookies básicos. As opções também estão disponíveis para React Native, Node. js, Electron e várias outras plataformas.

Você define o mecanismo de armazenamento a ser usado, importando-o de seu pacote. Seu principal objeto de implementação de API deve então ser passado como a opção de armazenamento para Redux Persist.

Você pode implementar seu próprio mecanismo de armazenamento para usar um mecanismo de persistência customizado. Crie um objeto com os métodos setItem (), getItem () e removeItem (). Redux Persist é assíncrono, então cada método deve retornar uma Promise que é resolvida quando a operação for concluída.

O objeto Persistor

O objeto persistor retornado de chamadas persistStore () tem alguns métodos utilitários para permitir que você gerencie a persistência.

Você pode pausar e retomar a persistência usando os métodos pause () e resume () respectivamente. Você pode forçar uma gravação imediata no mecanismo de armazenamento com flush (). Isso pode ser útil se você precisar garantir que seu estado persista após uma operação específica.

Você pode limpar todos os dados persistentes do mecanismo de armazenamento usando . purge (). Na maioria dos casos, isso deve ser evitado – você deve usar uma ação Redux para limpar sua loja, que então se propagaria automaticamente para os dados persistentes.

Reconciliação de estado

Redux Persist oferece suporte a três maneiras diferentes de hidratar sua loja a partir do estado persistente. A hidratação ocorre automaticamente quando você chama persistStore () e os dados existentes são encontrados no mecanismo de armazenamento. O Redux Persist precisa injetar esses dados iniciais em sua loja.

A estratégia padrão é mesclar objetos até um nível de profundidade. Quaisquer objetos aninhados &’ não serão mesclados – a mudança recebida substituirá tudo que já está em seu estado.

• Estado persistente: {"demo": {"foo": "bar"}}
• Estado na loja: {"demo": {"exemplo": teste "}}
• Loja hidratada resultante: {"demo": {"foo": "bar"}}

Você pode, opcionalmente, alternar para mesclar objetos em níveis de profundidade. Importe o novo reconciliador de estado e adicione-o à configuração da sua loja:

// as importações usuais omitiam a importação autoMergeLevel2 de " redux-persist / lib / stateReconciler / autoMergeLevel2 & quot ;;   const persistConfig = & # 123; chave: " root & quot ;, storage, stateReconciler: autoMergeLevel2 & # 125 ;;   // configuração da loja omitida

Aqui está qual seria o resultado de autoMergeLevel2 ao hidratar o exemplo acima:

• Estado persistente: {"demo": {"foo": "bar"}}
• Estado na loja: {"demo": {"exemplo": teste "}}
• Loja hidratada resultante: {" demo ": {" foo ":" bar "," exemplo ":" teste "}}

Os valores das propriedades de demonstração das duas fontes são combinados na hidratação.

Use o reconciliador hardSet se desejar desativar totalmente a fusão. Isso substituirá o estado da loja pelo conteúdo do mecanismo de armazenamento. Isso geralmente é indesejável, pois torna as migrações mais complicadas – se você adicionar uma nova propriedade inicial ao seu estado, ela não será definida para os usuários existentes assim que a sessão hidratar.

Migrando seu estado

No que diz respeito às migrações, Redux Persist tem suporte embutido para atualizar o estado persistente para uma nova versão. Às vezes, você pode substituir propriedades por alternativas mais novas. Você precisa ter certeza de que os usuários existentes não precisarão redefinir seu aplicativo para continuar usando-o.

As migrações são configuradas usando a chave de configuração de migração. A abordagem mais simples é passar uma função que assume o estado como parâmetro e retorna o estado migrado. Você também precisa definir a chave de configuração da versão para que o Redux Persist possa identificar quando as migrações são necessárias. Cada vez que a versão muda, sua função de migração será chamada.

const persistConfig = & # 123; key: " root & quot ;, storage, version: 1, migrate: & # 40; state & # 41; = > & # 40; & # 123; ... state, oldProp: undefined, newProp: " foobar " & # 125; & # 41 ;; & # 125 ;;

Como alternativa à abordagem da função, você pode passar um objeto que permite que funções de migração individuais sejam criadas para cada etapa da versão. Isso deve ser passado para a função createMigrate () antes de ser transferido para a configuração do Redux Persist.

// outras importações omitidasimportar & # 123; createMigrate & # 125; de " redux-persist & quot ;;   migrações const = & # 123; 1: estado = > & # 40; & # 123; ... estado, extraProp: true & # 125; & # 41;, 2: estado = > & # 40; & # 123 ; ... estado, extraProp: undefined, extraPropNew: true & # 125; & # 41; & # 125 ;;   const persistConfig = & # 123; chave: " root & quot ;, armazenamento, versão: 2, migrate: createMigrate & # 40; migrações & # 41; & # 125;

Neste exemplo, estamos reinicializando a loja como versão 2. Se o estado já existisse no dispositivo do usuário como versão 0, ambas as migrações seriam corre. Se o usuário estivesse na versão 1, apenas a última migração seria executada.

Aplicando transformações

Um último ponto a ser mencionado é que o Redux Persist oferece suporte ao uso de “ transformação ” funções. Eles são adicionados à sua configuração e permitem que você manipule os dados salvos ou restaurados.

A documentação da biblioteca lista várias transformações populares que você pode usar. Eles permitem que você comprima, criptografe ou expire automaticamente seu estado persistente, sem precisar implementar nenhuma lógica no nível do aplicativo por conta própria.

As transformações são especificadas como uma matriz em seu objeto de configuração. Eles são executados na ordem fornecida.

const persistStore = & # 123; chave: " root & quot ;, armazenamento, transformações: & # 91; MyTransformer & # 93; & # 125 ;;

Para escrever seu próprio transformador, use a função createTransform (). São passadas duas funções e um objeto de configuração:

import & # 123; createTransform & # 125; de " redux-persist & quot ;;   const MyTransformer = createTransform & # 40; & # 40; inboundState, key & # 41; = > & # 40; & # 123; ... inboundState, b64: btoa & # 40; inboundState.b64 & # 41; & # 125; & # 41;, & # 40; outboundState, key & # 41; = > & # 40; & # 123; ... outboundState, b64: atob & # 40; outboundState.b64 & # 41; & # 125; & # 41; , & # 123; & # 125; & # 41 ;;

Neste exemplo, armazenamos a propriedade b64 de nosso estado como seu valor codificado em Base64. Quando os dados são mantidos no armazenamento (outboundState), o valor é codificado. Ele é decodificado quando o estado persistente está sendo hidratado (inboundState).

O objeto de configuração pode ser usado para definir uma lista branca e uma lista negra de nomes de redutores. O transformador seria então usado apenas com redutores que correspondam a essas restrições.

Conclusão

Redux Persist é uma biblioteca poderosa com uma interface simples. Você pode configurar a persistência automática de sua loja Redux em apenas algumas linhas de código. Usuários e desenvolvedores ficarão gratos por sua conveniência.