Gerenciamento de Estado com Redux Toolkit: Boas Práticas

Introdução

O Redux Toolkit é uma ferramenta oficial recomendada para simplificar o gerenciamento de estado em aplicações React. Ele fornece um conjunto de utilitários que ajudam a reduzir a quantidade de código necessário para trabalhar com Redux, tornando o estado mais previsível e fácil de gerenciar.

Configuração Inicial

Primeiro, precisamos configurar o Redux Toolkit na nossa aplicação React. Supondo que você já tenha um projeto React criado, você pode seguir estes passos:

Instalação

Instale o Redux Toolkit e React-Redux via NPM ou Yarn:

npm install @reduxjs/toolkit react-redux

ou

yarn add @reduxjs/toolkit react-redux

Configuração da Store

Crie uma store Redux utilizando o configureStore do Redux Toolkit. No diretório raiz do seu projeto, crie uma pasta app e, dentro dela, um arquivo chamado store.js:

import { configureStore } from '@reduxjs/toolkit';

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

Criando Slices

Um "slice" é uma coleção de reducer e actions geradas automaticamente para um pedaço específico do estado da aplicação.

Exemplo de Slice

Vamos criar um slice para gerenciar o estado de uma lista de tarefas. Primeiro, crie uma pasta features e, dentro dela, uma pasta todos. Em features/todos, crie um arquivo chamado todosSlice.js:

import { createSlice } from '@reduxjs/toolkit';

export const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: state.length + 1, text: action.payload, completed: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
});

export const { addTodo, toggleTodo } = todosSlice.actions;

export default todosSlice.reducer;

Integrando o Slice com a Store

Volte ao arquivo app/store.js e inclua o reducer do slice:

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from '../features/todos/todosSlice';

export const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
});

Usando Redux Toolkit na Aplicação

Agora que configuramos o Redux Toolkit e criamos um slice, podemos usá-lo em nossos componentes React.

Fornecendo a Store com o Provider

No arquivo index.js da sua aplicação, use o Provider do React-Redux para passar a store para sua aplicação:

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Usando o Estado e Actions no Componente

Em um componente React, você pode usar os hooks useSelector e useDispatch para interagir com o estado Redux:

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './features/todos/todosSlice';

const TodoApp = () => {
  const [newTodo, setNewTodo] = useState('');
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addTodo(newTodo));
    setNewTodo('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            onClick={() => dispatch(toggleTodo(todo.id))}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

Conclusão

O Redux Toolkit simplifica significativamente

o gerenciamento de estado em aplicações React, reduzindo a complexidade e o boilerplate associado ao Redux tradicional. Com a configuração inicial, criação de slices e integração com componentes React, você pode construir aplicações robustas e previsíveis com eficiência. Explorar ainda mais as funcionalidades do Redux Toolkit, como middlewares e APIs assíncronas, pode elevar ainda mais o potencial da sua aplicação.