Gerenciamento de Estado com Redux Toolkit: Boas Práticas
Tags: react, redux, javascript, webdev
Published: 2024-04-26 18:25:12

## 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:

```bash
npm install @reduxjs/toolkit react-redux
```
ou
```bash
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`:

```javascript
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`:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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.