"Creación de Emoji Todo List con useReducer en React"

¿Cómo implementar un Emoji To-Do List usando useReducer en React?

Crear una aplicación interactiva en React puede parecer un desafío, pero con los hooks adecuados, como useReducer, podemos manejar estados complejos con facilidad. Este artículo detalla cómo implementar un Emoji To-Do List, permitiendo agregar y eliminar ítems con emojis en lugar de texto. Vamos a explorar las partes esenciales para construir esta aplicación y maximizar la eficiencia en la gestión de estados en React.

¿Qué es useReducer y cómo se utiliza?

useReducer es un hook de React ideal para manejar lógica de estados complejos o múltiples estados ligados. Funciona de manera similar a un patrón de reducer tal como Redux. Este hook requiere dos principales parámetros: la función reducer y el estado inicial.

Creando un nuevo componente con React

Comenzamos removiendo elementos y componentes por defecto en nuestro entorno de desarrollo para partir de una base limpia. Especialmente, eliminando el componente App y sus estilos correspondientes. Luego, importamos y configuramos nuestro nuevo componente principal llamado ToDoList en el archivo main.js.

import React, { useReducer } from 'react';
import todoReducer from './reducers/todoReducer'; // Supongamos que ya tienes este reducer definido
import './index.css'; // Importa tus estilos personalizados

const ToDoList = () => {
  const [state, dispatch] = useReducer(todoReducer, []);

  // Estado local para almacenar el texto del input
  const [todoText, setTodoText] = useState('');

  // Maneja la acción de agregar un nuevo To-Do
  const handleAddTodo = () => {
    const mappedText = todoText.toLowerCase(); // Convertimos a minúsculas para evitar errores de mapeo
    dispatch({ type: 'ADD_TODO', payload: mappedText });
    setTodoText(''); // Reseteamos el input
  };

  // Detecta el evento Enter
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      handleAddTodo();
    }
  };

  return (
    <div>
      <h1>Emoji To-Do List</h1>
      <input
        type="text"
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="Add a new to-do"
      />
      <ul>
        {state.map((todo) => (
          <li key={todo.id} onClick={() => dispatch({ type: 'REMOVE_TODO', payload: todo.id })}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ToDoList;

¿Cómo funciona el uso de estado local y global?

En nuestro componente, utilizamos tanto useState como useReducer. useState mantiene el estado local de nuestro input, mientras que useReducer administra el estado global de la lista de To-Dos.

• Estado Local (todoText): Usado para capturar el texto del input.
• Estado Global (state): Contiene todos los elementos de la lista.

Mapeando texto a emojis

Para enriquecer la experiencia del usuario, transformamos el texto del input en emojis. Convertimos cualquier entrada a minúsculas para asegurar una coincidencia precisa con el mapa de emojis. Si la entrada no coincide, mostramos el texto original.

Despachando acciones para manejar estados

El hook useReducer nos proporciona la función dispatch, a través de la cual enviamos acciones para modificar el estado global. Las acciones son objetos que describen el tipo de cambio a realizar y los datos necesarios para hacerlo.

• Agregar a la lista: dispatch({ type: 'ADD_TODO', payload: mappedText })
• Remover de la lista: dispatch({ type: 'REMOVE_TODO', payload: todo.id })

Desafíos y mejores prácticas

Manejar el estado complejamente usando useReducer mejora la claridad en aplicaciones React con múltiples interacciones de estado. Siempre es recomendable entender el flujo de estados y comunicar las acciones entre componentes para escalabilidad y mantenimiento del código.

Invitamos a que sigas explorando el vasto mundo de React y cómo diferentes hooks pueden simplificar tus aplicaciones. ¡Continúa tu viaje de aprendizaje, comenta cómo te fue y sigue practicando!