Cómo ha cambiado Redux y por qué sigue añadiéndose a nuevos proyectos

Recuerda aquellos tiempos en los que un simple contador en Redux requería crear tres archivos separados, declarar una docena de constantes y escribir un enorme switch-case en el reducer? Por esto, miles de desarrolladores llegaron a odiar la librería. Pero Redux ya no es lo que era en 2015.

Los desarrolladores reconocieron el problema a tiempo y publicaron Redux Toolkit (RTK). Hoy se ha convertido en el estándar para trabajar con la librería y ha eliminado casi todo lo que se le criticaba a Redux.

Por qué necesitas un gestor de estado global

En aplicaciones React pequeñas, puedes arreglártelas fácilmente con el paso regular de props o con React Context integrado. Los problemas empiezan cuando el proyecto crece. Cuando los datos de un formulario necesitan actualizar simultáneamente una barra lateral, el encabezado del sitio y enviar análisis, la cadena de props se convierte en un caos.

Redux mantiene el estado de la aplicación en un único objeto (store). No cambias este objeto directamente. En su lugar, despachas una acción, y funciones puras, los reducers, calculan el nuevo estado basándose en el anterior.

Este enfoque proporciona una predictibilidad clara. Si algo se rompe en la aplicación, a través de Redux DevTools puedes ver el historial completo de cambios de estado y rebobinar el tiempo, rastreando las acciones del usuario paso a paso.

Cómo Redux Toolkit facilitó la vida

Anteriormente, para actualizar un solo campo tenías que rastrear manualmente la inmutabilidad del objeto, creando extensos spreads.

Redux Toolkit tiene Immer integrado. Ahora el código dentro de los reducers se escribe como si estuvieras mutando el estado directamente, y la librería convierte automáticamente esto en una actualización inmutable segura.

Veamos un ejemplo 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 }

No hay archivos separados con tipos de acciones. La función createSlice creó tanto el reducer como los generadores de acciones para ti.

Cuándo se necesita Redux y cuándo es mejor prescindir de él

El creador de la librería, Dan Abramov, escribió "You Might Not Need Redux" hace años. Este consejo sigue siendo relevante hoy.

Redux es útil en situaciones específicas:

• Hay muchos datos que cambian activamente con el tiempo y se usan en diferentes partes de la aplicación.
• La lógica de actualización del estado es compleja o requiere una secuenciación estricta.
• Se necesita una depuración cómoda con un historial transparente de todos los eventos.
• Muchas personas trabajan en el equipo y se requiere un único patrón claro de manejo de datos.

Si tienes una aplicación simple donde los datos solo necesitan pasar un par de niveles hacia abajo, añadir Redux aquí no vale la pena. Las abstracciones extra solo complicarán el código.

Inicio rápido

La forma más fácil de crear un proyecto es con Vite y una plantilla lista para usar de Redux Toolkit y TypeScript:

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

Para Next.js, hay una plantilla lista para usar de Vercel:

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

Si estás añadiendo la librería a un proyecto existente, es suficiente con instalar dos paquetes:

npm install @reduxjs/toolkit react-redux

En resumen

El núcleo de Redux pesa aproximadamente 2 KB. La librería ha dejado atrás hace mucho la era del código repetitivo interminable. Junto con Redux Toolkit, obtienes una herramienta estricta y predecible para el manejo del estado que funciona muy bien en proyectos grandes.