Engineering

Como migrar progressivamente para o Redux Toolkit

February 17, 2021

min

Tabela de conteúdo

Exemplo H2

[vc_row] [vc_column] [vc_column_text] O Redux é uma solução popular de gerenciamento de estado de aplicativos; uma biblioteca de código aberto que pode ser integrada a estruturas de front-end como React e Angular. O Redux por si só nos permite alcançar o estado global do aplicativo.

O React é outra biblioteca de interface de usuário de código aberto que permite criar interfaces de usuário interativas. O React por si só não fornece uma API útil para gerenciar o estado global (embora esse problema tenha sido resolvido em suas versões mais recentes usando a API de contexto, a maioria dos desenvolvedores ainda prefere o Redux). Uma combinação de React e Redux permite que você escreva aplicativos escaláveis com bases de código que podem ser mantidas. No entanto, para adicionar recursos menores, o Redux exige um número significativo de linhas de códigos.

Para reduzir os códigos padronizados e facilitar as funcionalidades, a equipe Redux lançou o kit de ferramentas Redux. Com o kit de ferramentas Redux, você não precisa reescrever o código existente. Como tem compatibilidade com versões anteriores, o código existente funciona conforme o esperado.

O kit de ferramentas Redux (RTK) vem com o Redux Thunk Middleware, mas usamos o Redux Saga para ações assíncronas, gerenciamos os efeitos colaterais do aplicativo com facilidade, melhor legibilidade do código e testes fáceis.

Etapas para migrar para o Redux ToolKit

Aqui está um guia passo a passo para ajudar você a migrar

Etapa 1

Instale o kit de ferramentas e remova outros pacotes que vêm com ele, por padrão.

npm em @reduxjs /toolkit
npm desinstalar redux redux-devtools-extension redux-thunk

Etapa 2

Substitua createStore por ConfigureStore do kit de ferramentas e passe o redutor para a função Redux ConfigureStore, que então retorna um objeto de armazenamento.

- importar {createStore} de “redux”;
+ importar {configureStore} de "@reduxjs /toolkit “;
importar RootReducer de”. /redutores “;

- const store = createStore (RootReducer);
+ const store = configureStore ({
+ redutor: RootReducer,
+});

Agora você migrou com sucesso para o kit de ferramentas Redux. Além disso, todos os códigos que já existiam funcionarão normalmente.

Minha parte favorita do kit de ferramentas é onde agora você pode usar fatias para configurar a função redutora para cada novo recurso.

Você não precisa definir ações e criadores de ações explicitamente. Você pode simplesmente definir o estado inicial de suas funções de loja e redutor, que são então chamadas quando uma ação é despachada.

Abaixo está um exemplo de documentos oficiais:

importar {createSlice} de '@reduxjs /toolkit';

const counterSlice = createSlice ({
nome: 'contador',
Estado inicial: 0,
redutores: {
incremento: estado => estado + 1,
decréscimo: estado => estado - 1
}
})

const store = configureStore ({
redutor: CounterSlice.reducer
})

document.getElementById ('incremento') .addEventListener ('clique', () => {
store.dispatch (counterslice.actions.increment ())
})

A função createSlice pega um objeto com três argumentos

<object>{nome<string>, initialState<any>, redutor “;

e retorna um objeto que contém todos os criadores da ação em uma chave chamada ações com o mesmo nome de função que o dos redutores. Agora, esses criadores de ações retornam objetos de ação conforme mostrado abaixo:

//console.log (counterslice.actions.increment ());
{tipo: “contador/incremento”, carga útil: indefinida}

//console.log (counterslice.actions.increment (4));
{tipo: “contador/incremento”, carga útil: 4}

Lembre-se de que a função redutoranão é necessário retornar um novo objeto toda vez. Portanto, você pode alterá-lo e o kit de ferramentas Redux lidará com a imutabilidade em segundo plano.

Às vezes, talvez seja necessário acessar o tipo de ação sozinho e não o objeto; nesse caso, você pode usar o para String método. É útil quando você usa a saga Redux para observar os tipos de ação.

counterslice.actions.increment.toString ();
//contador/incremento

Seguir essas duas etapas pode ajudá-lo a aproveitar o poder do kit de ferramentas Redux, que funciona com menos linhas de códigos padronizados, lógica de código simplificada e melhor desempenho. Ele também facilita o teste e a depuração e vem com recursos como compatibilidade com versões anteriores e estados previsíveis.

Para obter mais detalhes, você pode ler mais sobre o kit de ferramentas Redux e suas funcionalidades no documentos oficiais. [/vc_column_text] [/vc_column] [/vc_row]

Aditya Tibrewal