Como o Redux Mudou e Por Que Ainda É Adicionado a Novos Projetos

Você se lembra da época em que um simples contador em Redux exigia criar três arquivos separados, declarar uma dúzia de constantes e escrever um enorme switch-case no reducer? Por causa disso, milhares de desenvolvedores passaram a odiar a biblioteca. Mas o Redux não é mais o que era em 2015.

Os desenvolvedores reconheceram o problema a tempo e lançaram o Redux Toolkit (RTK). Hoje ele se tornou o padrão para trabalhar com a biblioteca e removeu quase tudo pelo que o Redux era anteriormente criticado.

Por que você precisa de um gerenciador de estado global

Em pequenas aplicações React, você pode facilmente lidar com a passagem tradicional de props ou com o Context integrado do React. Os problemas começam quando o projeto cresce. Quando dados de um formulário precisam atualizar simultaneamente uma barra lateral, o cabeçalho do site e enviar dados de analytics, a cadeia de props se transforma em caos.

Redux mantém o estado da aplicação em um único objeto (store). Você não modifica esse objeto diretamente. Em vez disso, você despacha uma action, e funções puras, os reducers, calculam o novo estado com base no anterior.

Essa abordagem oferece previsibilidade clara. Se algo quebrar na aplicação, através do Redux DevTools você pode ver o histórico completo de mudanças de estado e voltar no tempo, rastreando as ações do usuário passo a passo.

Como o Redux Toolkit facilitou o trabalho

Antes, para atualizar um único campo você precisava rastrear manualmente a imutabilidade do objeto, criando spreads complicados.

Redux Toolkit tem o Immer integrado. Agora o código dentro dos reducers é escrito como se você estivesse mutando o estado diretamente, e a biblioteca converte automaticamente isso em uma atualização imutável segura.

Vamos ver um exemplo básico de contador:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Immer улавливает "мутацию" и создает новое состояние
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.subscribe(() => console.log(store.getState()))

store.dispatch(incremented()) // { value: 1 }
store.dispatch(incremented()) // { value: 2 }
store.dispatch(decremented()) // { value: 1 }

Sem arquivos separados com tipos de actions. A função createSlice criou tanto o reducer quanto os action generators para você.

Quando o Redux é necessário e quando é melhor ficar sem ele

O criador da biblioteca, Dan Abramov, escreveu "You Might Not Need Redux" há anos. Esse conselho ainda é relevante hoje.

Redux é útil em situações específicas:

• Há muitos dados que mudam ativamente ao longo do tempo e são usados em diferentes partes da aplicação.
• A lógica de atualização do estado é complexa ou requer sequenciamento estrito.
• É necessário um debug conveniente com um histórico transparente de todos os eventos.
• Muitas pessoas trabalham na equipe e é necessário um padrão único e claro para manipulação de dados.

Se você tem uma aplicação simples onde os dados precisam apenas ser passados um par de níveis para baixo, puxar o Redux aqui não vale a pena. Abstrações extras só vão complicar o código.

Início Rápido

A forma mais fácil de criar um projeto é com Vite e um template pronto de Redux Toolkit e TypeScript:

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Para Next.js, há um template pronto da Vercel:

npx create-next-app --example with-redux my-app

Se você está adicionando a biblioteca a um projeto existente, basta instalar dois pacotes:

npm install @reduxjs/toolkit react-redux

Conclusão

O core do Redux pesa cerca de 2 KB. A biblioteca já deixou há muito tempo a era do código boilerplate interminável. Emparelhado com o Redux Toolkit, você obtém uma ferramenta rígida e previsível para gerenciamento de estado que funciona muito bem em projetos grandes.