React & Redux explicado con Tacos

Supongamos que tienes una taquería en la que los clientes pueden hacer pedidos de tacos personalizados. Cada vez que un cliente hace un pedido, necesitas mantener un registro de los ingredientes que se utilizaron para hacer los tacos. Aquí es donde Redux puede ser útil.

En términos simples, Redux es una herramienta de manejo de estado que se utiliza comúnmente en aplicaciones de React. En este caso, usaríamos Redux para almacenar el estado de los pedidos de tacos, que incluiría los ingredientes utilizados.

En Redux, el estado de la aplicación se almacena en un objeto llamado "store". El store es el único lugar donde se almacena el estado de la aplicación. Esto significa que si necesitamos actualizar el estado, debemos hacerlo a través de acciones que se envían al store.

En nuestro ejemplo de taquería, podríamos crear un store de Redux para almacenar los pedidos de tacos:

import { createStore } from 'redux';

const initialState = {
  orders: []
};

function orderReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_ORDER':
      return {
        ...state,
        orders: [...state.orders, action.payload]
      };
    default:
      return state;
  }
}

const store = createStore(orderReducer);

Aquí, creamos un store que tiene un estado inicial que incluye un array vacío de pedidos. También creamos un reductor orderReducer que manejará las acciones, incluyendo la acción de 'ADD_ORDER' que agrega un nuevo pedido al estado del store.

Luego, podemos usar React para crear una interfaz de usuario que permita a los clientes hacer pedidos de tacos. En nuestro componente de pedido, podemos usar Redux para agregar nuevos pedidos al store:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

function OrderForm() {
  const [ingredients, setIngredients] = useState([]);
  const dispatch = useDispatch();

  const handleSubmit = e => {
    e.preventDefault();
    dispatch({ type: 'ADD_ORDER', payload: ingredients });
    setIngredients([]);
  };

  const handleIngredientChange = e => {
    const { name, checked } = e.target;
    setIngredients(ingredients =>
      checked ? [...ingredients, name] : ingredients.filter(i => i !== name)
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Build your own taco</h2>
      <label>
        <input
          type="checkbox"
          name="beef"
          checked={ingredients.includes('beef')}
          onChange={handleIngredientChange}
        />
        Beef
      </label>
      <label>
        <input
          type="checkbox"
          name="cheese"
          checked={ingredients.includes('cheese')}
          onChange={handleIngredientChange}
        />
        Cheese
      </label>
      <button type="submit">Order</button>
    </form>
  );
}

Aquí, creamos un componente OrderForm que maneja el estado local de los ingredientes de los tacos con el hook useState. Cuando se envía el formulario, usamos el hook useDispatch para enviar una acción al store de Redux con los ingredientes seleccionados. Luego, limpiamos el estado local de ingredientes y renderizamos el formulario de nuevo.

En resumen, en este ejemplo de taquería, usamos Redux para almacenar el estado de los pedidos