Creación de un Todo List con React Redux y Reducers

¿Cómo finalizar nuestro emoji todo list con Redux?

Estamos a punto de dar el toque final al emoji todo list utilizando Redux. Vamos a caminar paso a paso por la creación de un componente específico que nos permita manejar acciones de agregar y eliminar tareas. Esto nos ayudará a entender cómo Redux facilita la gestión de estados complejos. ¡Comencemos!

¿Cómo integramos el todo reducer en el store?

Para empezar, es esencial asegurarse de que nuestro todoReducer esté correctamente importado y configurado en el store. Si ves que está marcado en rojo, simplemente debes importarlo:

import todoReducer from 'ruta/al/todoReducer';

¿Cómo construimos un componente funcional para la lista de tareas?

El primer paso es crear la estructura básica de nuestro componente funcional TodoList. Aquí es donde manejaremos las acciones para agregar y eliminar tareas:

import { FC } from 'react';

const TodoList: FC = () => {
  return <div>Lista de tareas</div>;
};

export default TodoList;

¿Cómo despachamos acciones usando useDispatch?

Utilizar useDispatch de React Redux es vital para enviar acciones. No olvides instalar react-redux si aún no lo has hecho:

npm install react-redux

Luego, importa y utiliza useDispatch y define el tipo necesario:

import { useDispatch } from 'react-redux';
import { AppDispatch } from 'path/to/store';

const dispatch = useDispatch<AppDispatch>();

¿Cómo manejamos el agregado de tareas?

La función handleAddTodo es clave para gestionar el evento del teclado (cuando se presiona "Enter") y para despachar la acción addTodo. Primero, asegúrate de tener estas funciones importadas:

import { addTodo, removeTodo } from 'path/to/actions';

Luego, define la gestión de estado local y la función que se encarga de agregar tareas:

import React, { useState } from 'react';

const [todoText, setTodoText] = useState('');

const handleAddTodo = () => {
  dispatch(addTodo({
    id: Math.random(),
    text: todoText
  }));
  setTodoText('');
};

const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter') {
    handleAddTodo();
  }
};

¿Cómo eliminamos tareas específicas?

Para eliminar tareas, utilizamos una función similar, handleRemoveTodo, que se basa en nuestra acción removeTodo:

const handleRemoveTodo = (id: number) => {
  dispatch(removeTodo({
    id
  }));
};

¿Cómo asociamos texto a emojis?

El mapeo de texto a emojis ofrece una característica divertida y visual. Crea un objeto que asocia textos con emojis específicos:

const emojiMap: Record<string, string> = {
  'eat': '🍔',
  'sleep': '🛏️',
  'exercise': '🏋️‍♀️'
};

const mapTextToEmoji = (text: string) => {
  return emojiMap[text.toLowerCase()] || text;
};

¿Cómo renderizamos la lista de tareas?

Finalmente, para mostrar las tareas con sus respectivos emojis, asegúrate de obtener el estado actual de la lista usando el selector useSelector:

import { useSelector } from 'react-redux';
import { RootState } from 'path/to/store';

const todos = useSelector((state: RootState) => state.todos);

return (
  <ul>
    {todos.map(todo => (
      <li key={todo.id} onClick={() => handleRemoveTodo(todo.id)}>
        {mapTextToEmoji(todo.text)}
      </li>
    ))}
  </ul>
);

Y eso es todo. Con estos pasos, puedes agregar y eliminar tareas de la lista y visualizarlas de una forma más dinámica y envolvente utilizando emojis. Redux simplifica la tarea de manejar estados en aplicaciones complejas, especialmente cuando estás trabajando en un entorno global. ¡Sigue practicando y explora nuevas maneras de optimizar tus aplicaciones!