¿Qué es Redux?

Redux es una librería de gestión de estado para aplicaciones JavaScript. Su idea principal es simple pero poderosa: en lugar de que cada componente gestione su propio estado de forma aislada, Redux propone un único almacén central (llamado store) donde vive todo el estado de la aplicación. Cualquier componente puede leer ese estado y modificarlo siguiendo unas reglas estrictas y predecibles.

Aunque puede usarse con cualquier framework, se asocia principalmente a React.

---

¿Para qué sirve?

Cuando una aplicación crece, el estado empieza a ser un problema: un componente necesita datos que gestiona otro, hay que pasar props por múltiples niveles, y depurar qué cambió y por qué se vuelve difícil.

Redux resuelve esto centralizando el estado y haciendo que cada cambio sea explícito, rastreable y reproducible.

Es útil cuando:

• Varios componentes necesitan acceder al mismo dato
• El estado cambia frecuentemente y de forma compleja
• Quieres depurar la aplicación con herramientas que muestran el historial de cambios
• El equipo necesita un flujo de datos predecible y consistente

---

Los tres pilares de Redux

1. Store (almacén)

Un único objeto JavaScript que contiene todo el estado de la app:

import { createStore } from 'redux';

const store = createStore(reducer);

console.log(store.getState()); // { contador: 0, usuario: null, ... }

2. Actions (acciones)

Objetos simples que describen qué ocurrió. Tienen siempre un type y opcionalmente datos (payload):

// Definición de acciones
const incrementar = { type: 'INCREMENTAR' };
const setUsuario  = { type: 'SET_USUARIO', payload: { nombre: 'Ana' } };

// Disparar una acción al store
store.dispatch(incrementar);

3. Reducer

Una función pura que recibe el estado actual y una acción, y devuelve el nuevo estado. Nunca muta el estado directamente:

function reducer(state = { contador: 0 }, action) {
  switch (action.type) {
    case 'INCREMENTAR':
      return { ...state, contador: state.contador + 1 };
    case 'DECREMENTAR':
      return { ...state, contador: state.contador - 1 };
    default:
      return state;
  }
}

---

Redux con React (Redux Toolkit)

Hoy en día se usa Redux Toolkit, la forma oficial y moderna de escribir Redux con mucho menos código:

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

// Slice: reducer + acciones en un solo sitio
const contadorSlice = createSlice({
  name: 'contador',
  initialState: { valor: 0 },
  reducers: {
    incrementar: (state) => { state.valor += 1; }, // Toolkit permite "mutar" (usa Immer internamente)
    decrementar: (state) => { state.valor -= 1; },
    setSuma:     (state, action) => { state.valor += action.payload; },
  },
});

export const { incrementar, decrementar, setSuma } = contadorSlice.actions;
export const store = configureStore({ reducer: { contador: contadorSlice.reducer } });

// En un componente React
import { useSelector, useDispatch } from 'react-redux';
import { incrementar } from './contadorSlice';

function Contador() {
  const valor    = useSelector(state => state.contador.valor);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Valor: {valor}</p>
      <button onClick={() => dispatch(incrementar())}>+1</button>
    </div>
  );
}

---

¿Cuándo NO usar Redux?

Redux añade complejidad. Para apps pequeñas o medianas, el estado local de React (useState, useContext) suele ser suficiente. Redux brilla en aplicaciones grandes con mucho estado compartido entre componentes lejanos.

---

Conceptos relacionados

React Hook JavaScript SPA

---

Conclusión

Redux resuelve el problema del estado compartido en aplicaciones complejas imponiendo un flujo de datos unidireccional y predecible. Con Redux Toolkit, la verbosidad original se ha reducido mucho, haciéndolo una opción sólida cuando el estado de la app supera lo que el estado local puede gestionar cómodamente.

---