Objetivo do kit de ferramentas Redux

Já sabemos que redux é uma poderosa biblioteca de gerenciamento de estado para nossas aplicações JavaScript, especialmente quando trabalhamos com React.
Mas trabalhar com redux é difícil devido ao seu código pesado para configurar o redux. O que torna difícil manter e depurar. É aí que o Redux Toolkit vem para ajudar.
Resolução do kit de ferramentas Redux de problemas

• Configurar uma loja é muito complicado.
• Adicionando muitos pacotes para trabalhar com redux, por exemplo, Middleware, ferramentas.
• Redux precisa de muito código para configurar

O kit de ferramentas Redux é a forma oficial e recomendada de escrever lógica redux. Ele fornece um conjunto de ferramentas para simplificar o desenvolvimento, reduzir o código padrão que ajuda a tornar a aplicação escalonável e sustentável.

Principais benefícios do Redux Toolkit:

1. Menos código clichê: elimina a necessidade de constantes e criadores de ação.
2. Configuração simplificada da loja: fornece uma única API para configurar a loja com padrões razoáveis.
3. Suporte integrado para imutabilidade e DevTools: habilita automaticamente Redux DevTools e integra-se ao Immer para imutabilidade.
4. Melhor suporte ao TypeScript: fornece melhores digitações e integra-se bem ao TypeScript.

Podemos usar o redux toolkit com qualquer biblioteca javascript, então configuramos o redux toolkit com react.

Configurando o Redux Toolkit em um aplicativo React

Etapa 1: Crie um novo projeto React

Primeiro, vamos criar um novo aplicativo React. Você pode usar create-react-app ou Vite para essa finalidade. Usaremos create-react-app aqui para simplificar.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

Etapa 2: Instale o Redux Toolkit e React-Redux

Em seguida, instale os pacotes necessários: @reduxjs/toolkit e react-redux.

npm install @reduxjs/toolkit react-redux

1. Compreendendo fatias e redutores

Uma fatia é uma coleção de lógica e ações do redutor Redux para um recurso específico do seu aplicativo. Redux Toolkit fornece a função createSlice para ajudar a criar uma fatia de estado com o mínimo de clichê.

Etapa 1: Crie uma fatia
Vamos criar uma contra-fatia simples. Crie um novo arquivo chamado counterSlice.js dentro de um diretório features/counter:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value  = 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value  = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Aqui, definimos uma fatia chamada contador com um estado inicial e três redutores (incremento, decremento e incrementByAmount). A função createSlice gera automaticamente criadores de ações para cada função redutora.

1. Configurando a Loja Redux

Agora que temos nossa fatia, vamos configurar a loja Redux. Redux Toolkit fornece uma função configureStore que configura a loja com bons padrões.

Etapa 1: Crie uma loja
Crie um arquivo store.js dentro de um diretório de aplicativo:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Etapa 2: forneça a loja para seu aplicativo
Envolva seu aplicativo React em um componente do react-redux e passe-o para a loja. Atualize o arquivo index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  ,
  document.getElementById('root')
);

1. Conectando componentes à loja

Para interagir com a loja Redux, use os ganchos useSelector e useDispatch fornecidos por react-redux.
Etapa 1: acessar o estado com useSelector
Use o gancho useSelector para acessar o estado da loja

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
       dispatch(incrementByAmount(5))}>Increment by 5
    
  );
};

export default Counter;

Etapa 2: use o componente contador em seu aplicativo
Importe e use o componente Counter em seu componente principal do aplicativo:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    

      
  );
}

export default App;

1. Conclusão e próximas etapas

Nesta parte, cobrimos os fundamentos da configuração do Redux Toolkit em um aplicativo React, incluindo a criação de fatias, configuração da loja e conexão de componentes à loja Redux usando ganchos. Na próxima parte, nos aprofundaremos no tratamento da lógica assíncrona com createAsyncThunk para buscar dados de APIs e gerenciar diferentes estados de carregamento.

Fique ligado na Parte 2: Advanced Redux Toolkit - Async Logic com createAsyncThunk!