Redux Toolkit é a forma oficial recomendada de escrever lógica Redux. Ele fornece bons padrões para configuração de loja prontos para uso e inclui os complementos Redux mais comumente usados ​​​​integrados. Neste blog, abordaremos os fundamentos da integração do Redux Toolkit com um aplicativo React.

O que é o kit de ferramentas Redux?

Redux Toolkit é um conjunto de ferramentas que ajuda a simplificar o processo de escrita da lógica Redux. Inclui utilitários para simplificar casos de uso comuns, como configuração de loja, criação de redutores e gravação de lógica de atualização imutável.

Configurando o Redux Toolkit com React

Vamos seguir as etapas para configurar o Redux Toolkit em um aplicativo React.

Etapa 1: instalar dependências

Primeiro, você precisa instalar os pacotes necessários. Você pode fazer isso usando npm ou fio.

npm install @reduxjs/toolkit react-redux

Etapa 2: crie uma loja Redux

A loja é o objeto que dá vida ao Redux. Com Redux Toolkit, você pode criar uma loja usando a função configureStore.

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

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

export default store;

Etapa 3: crie uma fatia

Uma fatia é uma coleção de lógica e ações do redutor Redux para um único recurso do seu aplicativo. A função createSlice do Redux Toolkit gera criadores de ação e tipos de ação automaticamente.

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

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

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

export default counterSlice.reducer;

Etapa 4: forneça a loja para seu aplicativo React

Para disponibilizar o armazenamento Redux para seus componentes React, você precisa usar o componente Provider do react-redux.

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

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

Etapa 5: Conecte os componentes React ao Redux Store

Para conectar um componente React ao armazenamento Redux, você pode usar os ganchos useSelector e useDispatch do react-redux.

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

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

  return (
    

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

export default Counter;

Etapa 6: use o componente conectado em seu aplicativo

Finalmente, você pode usar o componente conectado em seu aplicativo.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

Conclusão

Seguindo essas etapas, você pode configurar o Redux Toolkit em seu aplicativo React para gerenciar o estado de maneira previsível e sustentável. Redux Toolkit simplifica muitas das tarefas comuns ao trabalhar com Redux, tornando mais fácil escrever e manter sua lógica Redux.

Exploração Adicional

Para aqueles que desejam se aprofundar no Redux Toolkit e React, aqui estão alguns recursos valiosos:

• Documentação do Redux Toolkit: A documentação oficial fornece guias abrangentes e referências de API.
  • Documentação do kit de ferramentas Redux
• Documentação do React Redux: Saiba mais sobre como usar o Redux com o React.
  • Documentação do React Redux
• Redux Essentials Tutorial: Um tutorial passo a passo para você começar a usar o Redux Toolkit.
  • Tutorial Redux Essentials
• Redux Fundamentals Tutorial: Um tutorial detalhado cobrindo os principais conceitos do Redux.
  • Tutorial de fundamentos do Redux

Obrigado pela leitura!
Po.