Cómo Utilizar useContext y useReducer para la Gestión del Estado en React

En este tutorial, aprenderás a usar los hooks useContext y useReducer de React para crear un gestor de estado eficiente y escalable en tus aplicaciones. Si bien useState es ideal para gestionar estados locales simples, useContext y useReducer te permitirán manejar estados más complejos de una manera organizada y clara. Vamos a construir juntos un ejemplo práctico paso a paso.

¿Qué es useContext?

useContext es un hook que permite acceder a los valores del contexto de React. Facilita compartir datos entre componentes sin tener que pasarlos explícitamente a través de props.

Ejemplo Básico de useContext

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext();

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  return (
    <div>
      <ThemedButton />
    </div>
  );
};

const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Button</button>;
};

export default App;

¿Qué es useReducer?

useReducer es un hook que te permite manejar estados más complejos mediante la combinación de un reducer (función que determina los cambios en el estado) y un estado inicial. Es similar a useState, pero es más adecuado para estados que involucran múltiples subvalores o lógica compleja.

Ejemplo Básico de useReducer

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Combinar useContext y useReducer para la Gestión del Estado

Combinar useContext y useReducer te permite crear una solución de gestión de estado potente y eficiente, especialmente útil en aplicaciones más grandes donde el manejo del estado puede volverse complicado.

Como Crear un State Manager con useContext y useReducer

Paso 1: Configurar el Contexto y el Reducer

import React, { createContext, useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <CountContext.Provider value={{ state, dispatch }}>
      {children}
    </CountContext.Provider>
  );
};

export { CountContext, CountProvider };

Paso 2: Usar el Contexto en Componentes

import React, { useContext } from 'react';
import { CountContext, CountProvider } from './CountContext';

const Counter = () => {
  const { state, dispatch } = useContext(CountContext);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

const App = () => {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
};

export default App;

Conclusión

En este tutorial, hemos visto cómo utilizar useContext y useReducer para gestionar el estado en aplicaciones React de manera efectiva. Con esta combinación, puedes escalar tu aplicación fácilmente sin perder claridad ni organización. Esperamos que este ejemplo te haya sido útil y que te sientas más cómodo utilizando estos hooks avanzados en tus proyectos.