Redux vs. React Context en Vite: ¿Pizza o Tacos para tu estado global?

¿Alguna vez has estado en un restaurante y no sabes si pedir pizza o tacos? Redux y React Context son eso mismo en el mundo de React: dos formas de manejar el estado de tu app, pero con sus propios sabores.

1. ¿Qué es React Context? (El "taco simple") 🌮

Imagina que tienes que pasar un plato de comida (tus datos) desde la cocina (componente padre) hasta el comensal (componente hijo). En lugar de gritar por toda la casa, usas React Context, que es como un mesero que lleva la información directo a donde la necesitas.

Cómo usarlo en Vite

Crea el contexto:

El contexto es un sistema para compartir datos entre componentes sin tener que pasarlos manualmente como props en cada nivel.

// ThemeContext.jsx
import { createContext, useState } from 'react';

export const TacoContext = createContext();

export function TacoProvider({ children }) {
  const [tacoType, setTacoType] = useState('pastor'); // estado inicial
  return (
    <TacoContext.Provider value={{ tacoType, setTacoType }}>
      {children}
    </TacoContext.Provider>
  );
}

Envuelve tu app (en main.jsx):

Esto sirve para que todos tus componentes puedan ver el contexto y acceder a sus datos.

import { TacoProvider } from './context/TacoContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <TacoProvider>
    <App />
  </TacoProvider>
);

Consume el contexto donde lo necesites:

import { useContext } from 'react';
import { TacoContext } from './context/TacoContext';

function Comensal() {
  const { tacoType, setTacoType } = useContext(TacoContext);
  return <h1>¡Quiero un taco de {tacoType}!</h1>;
}

Usa React Context para:

Pequeñas apps (como tu portfolio)

Implementar tema claro/oscuro

Cuando no quieres instalar dependencias adicionales

2. ¿Qué es Redux? (La "pizza familiar con 20 ingredientes") 🍕

Redux es como el sistema de pedidos de un gran restaurante: tiene cocineros (reducers), tickets de pedido (actions) y un lugar centralizado donde guardar todo (store). Es más complejo, pero escala mejor cuando tu app es enorme.

Para usarlo con Vite:

Instala Redux Toolkit:

La versión moderna y simplificada que reduce el código repetitivo de Redux puro:

npm install @reduxjs/toolkit react-redux

Crea un "slice":

Un slice es una porción del estado global + sus reglas de actualización.

// pizzaSlice.js
import { createSlice } from '@reduxjs/toolkit';

const pizzaSlice = createSlice({
  name: 'pizza',
  initialState: { flavor: 'pepperoni' },
  reducers: {
    changeFlavor: (state, action) => {
      state.flavor = action.payload;
    },
  },
});

export const { changeFlavor } = pizzaSlice.actions;
export default pizzaSlice.reducer;

Configura el store (en store.js):

import { configureStore } from '@reduxjs/toolkit';
import pizzaReducer from './pizzaSlice';

export const store = configureStore({
  reducer: {
    pizza: pizzaReducer,
  },
});

Envuelve tu app (en main.jsx):

import { Provider } from 'react-redux';
import { store } from './store';

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

Usa Redux en tus componentes:

import { useSelector, useDispatch } from 'react-redux';
import { changeFlavor } from './pizzaSlice';

function Cliente() {
  const flavor = useSelector((state) => state.pizza.flavor);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(changeFlavor('hawaiana'))}>
      Cambiar a pizza {flavor}
    </button>
  );
}

Conclusión: ¿Cuándo usar cada uno?

React Context es como un taco al pastor: rápido y sencillo.

Redux es la pizza familiar: más preparación, pero alimenta a todos.

¿Con cuál te quedas? ¡Déjame saber en los comentarios! 👇