Engineering

Como migrar progressivamente para o Redux Toolkit

February 17, 2021

min

Tabela de conteúdo

Exemplo H2

Aditya Tibrewal

Being the Lead Frontend Developer, Aditya handles all things frontend at CloudSEK. Prior to joining CloudSEK, he worked for Zomato and InterviewBit.

Nenhum item encontrado.

[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]

Como migrar progressivamente para o Redux Toolkit

Etapas para migrar para o Redux ToolKit

Etapa 1

Etapa 2

Blogs relacionados

Preveja ameaças cibernéticas contra sua organização