DEV Community

Cover image for Gerenciamento de Estado com Redux Toolkit: Boas Práticas
Vitor Rios
Vitor Rios

Posted on

4

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
Enter fullscreen mode Exit fullscreen mode

ou

yarn add @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

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: {},
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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,
  },
});
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay