Redux: um Tutorial Prático e Simples

Redux: um Tutorial Prático e Simples

Se você é um desenvolvedor JavaScript, provavelmente já ouviu falar do Redux. Ele é uma biblioteca JavaScript de código aberto para gerenciar o estado global de aplicações. O Redux é frequentemente usado com bibliotecas de interface de usuário, como React ou Angular, mas também pode ser usado com outras bibliotecas ou até mesmo com JavaScript puro (Vanilla JS).

Neste tutorial, vamos aprender o básico do Redux de forma prática e simples. Vamos criar um aplicativo de lista de tarefas simples para demonstrar como o Redux funciona.

O Que é Redux?

Redux é uma biblioteca JavaScript que nos ajuda a gerenciar o estado de uma aplicação de forma previsível. Ele é baseado em três princípios principais:

• Única fonte de verdade: O estado de toda a sua aplicação é armazenado em um único objeto chamado de store.
• Estado somente leitura: A única maneira de alterar o estado é despachando uma ação, que é um objeto que descreve o que aconteceu.
• Mudanças com funções puras: Para especificar como o estado é transformado pelas ações, você escreve reducers. Reducers são funções puras que recebem o estado anterior e uma ação e retornam um novo estado.

Por Que Usar Redux?

Existem várias razões pelas quais você pode querer usar o Redux em seus projetos:

• Gerenciamento de estado centralizado: O Redux armazena todo o estado da sua aplicação em um único local, tornando fácil rastrear as mudanças e depurar o código.
• Previsibilidade: O Redux torna o fluxo de dados em sua aplicação mais previsível, o que facilita o entendimento de como o estado muda em resposta às ações do usuário.
• Testabilidade: O Redux facilita a escrita de testes para sua aplicação, pois você pode testar os reducers isoladamente.
• Manutenibilidade: O Redux torna sua aplicação mais fácil de manter, pois o código é mais organizado e fácil de entender.

Criando um Aplicativo de Lista de Tarefas com Redux

Vamos criar um aplicativo de lista de tarefas simples para demonstrar como usar o Redux.

Passo 1: Configurar o Projeto

Primeiro, precisamos configurar um novo projeto React. Podemos usar o Create React App para isso:

npx create-react-app todo-list
cd todo-list

Passo 2: Instalar o Redux

Em seguida, precisamos instalar o Redux e a biblioteca react-redux, que nos permite conectar o Redux aos nossos componentes React:

npm install redux react-redux

Passo 3: Criar o Reducer

Um reducer é uma função pura que recebe o estado atual e uma ação como argumentos e retorna um novo estado. Vamos criar um reducer para gerenciar o estado da nossa lista de tarefas.

Crie um novo arquivo chamado tasksReducer.js dentro da pasta src e adicione o seguinte código:

const initialState = {
  tasks: [],
};

const tasksReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, action.payload],
      };
    case 'DELETE_TASK':
      return {
        ...state,
        tasks: state.tasks.filter((task) => task.id !== action.payload),
      };
    default:
      return state;
  }
};

export default tasksReducer;

Passo 4: Criar a Store

A store é o objeto que contém o estado da nossa aplicação. Vamos criar a store usando a função createStore do Redux.

Crie um novo arquivo chamado store.js dentro da pasta src e adicione o seguinte código:

import { createStore } from 'redux';
import tasksReducer from './tasksReducer';

const store = createStore(tasksReducer);

export default store;

Passo 5: Conectar o Redux ao React

Agora precisamos conectar o Redux ao nosso aplicativo React. Podemos fazer isso usando o componente Provider da biblioteca react-redux.

Abra o arquivo src/index.js e atualize-o com o seguinte código:

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

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

Passo 6: Criar os Componentes React

Vamos criar dois componentes React: um para exibir a lista de tarefas e outro para adicionar novas tarefas.

Crie um novo arquivo chamado TaskList.js dentro da pasta src e adicione o seguinte código:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const TaskList = () => {
  const tasks = useSelector((state) => state.tasks);
  const dispatch = useDispatch();

  const handleDeleteTask = (id) => {
    dispatch({ type: 'DELETE_TASK', payload: id });
  };

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          {task.text}
          <button onClick={() => handleDeleteTask(task.id)}>Excluir</button>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;

Crie outro arquivo chamado AddTaskForm.js dentro da pasta src e adicione o seguinte código:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

const AddTaskForm = () => {
  const [taskText, setTaskText] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch({ type: 'ADD_TASK', payload: { id: Date.now(), text: taskText } });
    setTaskText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={taskText}
        onChange={(e) => setTaskText(e.target.value)}
      />
      <button type="submit">Adicionar Tarefa</button>
    </form>
  );
};

export default AddTaskForm;

Passo 7: Usar os Componentes no Aplicativo

Finalmente, vamos usar os componentes TaskList e AddTaskForm no nosso componente principal App.

Abra o arquivo src/App.js e atualize-o com o seguinte código:

import React from 'react';
import TaskList from './TaskList';
import AddTaskForm from './AddTaskForm';

const App = () => {
  return (
    <div>
      <h1>Lista de Tarefas</h1>
      <AddTaskForm />
      <TaskList />
    </div>
  );
};

export default App;

Passo 8: Executar o Aplicativo

Agora você pode executar o aplicativo com o seguinte comando:

npm start

Isso iniciará o aplicativo em http://localhost:3000/. Você deve ver a lista de tarefas vazia e um formulário para adicionar novas tarefas.

Conclusão

Neste tutorial, aprendemos o básico do Redux e como usá-lo para criar um aplicativo de lista de tarefas simples. O Redux é uma biblioteca poderosa que pode ajudá-lo a gerenciar o estado de suas aplicações de forma previsível e eficiente.