Creación de Reducer para Manejo de Emojis en Lista de Tareas

¿Cómo crear un reducer para gestionar una lista de tareas (todo list)?

Dominar la gestión de estados en aplicaciones es esencial, y aún más en aplicaciones con un flujo constante de datos como las listas de tareas. Usar Redux es una de las maneras más eficientes de gestionar estos estados. En este artículo, exploraremos cómo configurar un reducer para añadir y eliminar elementos de una lista de tareas utilizando Redux Toolkit.

¿Qué debemos saber antes de crear el reducer?

Antes de comenzar con el reducer, es fundamental contar con un esquema o tipo de los datos que se manipularán. En nuestro ejemplo, un elemento de la lista de tareas (todo) contiene:

• Un ID numérico para identificar de manera única cada tarea.
• Un texto (cadena) que describe la tarea.

Además, debemos definir el tipo de estado global, que en este caso es simplemente una lista de todos.

type Todo = {
  id: number;
  text: string;
};

type TodosState = Todo[];

¿Cómo definimos el estado inicial?

El estado inicial es básicamente un array vacío, ya que al comenzar no hay tareas registradas:

const initialState: TodosState = [];

¿Cómo creamos el reducer utilizando createReducer de Redux Toolkit?

Redux Toolkit ofrece funcionalidades muy prácticas y eficientes para crear reducers, como createReducer. En nuestro enfoque, aplicaremos este método para diseñar un reducer que procese acciones como agregar y eliminar tareas.

Importamos createReducer de Redux Toolkit:

import { createReducer } from '@reduxjs/toolkit';
import { addTodo, removeTodo } from './todoActions';

Creamos el reducer empleando un builder pattern, que simplifica la adición de casos a manejar:

const todoReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(addTodo, (state, action) => {
      const newTodo = {
        id: state.length + 1,
        text: action.payload,
      };
      state.push(newTodo);
    })
    .addCase(removeTodo, (state, action) => {
      return state.filter(todo => todo.id !== action.payload);
    });
});

export default todoReducer;

¿Cómo se manejan las acciones en el reducer?

Las acciones en Redux son fundamentales para alterar el estado. En nuestro ejemplo, tenemos dos acciones: addTodo y removeTodo. Estas acciones permiten respectivamente añadir un nuevo elemento a la lista o eliminar uno existente, empleando el ID para identificar cuál quitar.

• addTodo: Añade un nuevo elemento a la lista de tareas. El ID se genera sumando uno al tamaño actual del array, asegurando que cada elemento tenga un identificador único.

• removeTodo: Filtra el estado actual de manera que elimina el elemento cuya ID coincida con la proporcionada por la acción. Esta funcionalidad es clave para mantener la lista actualizada sin tareas duplicadas.

¿Qué debemos hacer luego de crear el reducer?

Con el reducer configurado, el siguiente paso será crear el componente TodoList, que sirva para renderizar la lista y gestionar la interfaz que permita las entradas de usuario, como nuevos textos para las tareas. Esto se explorará en clases futuras. Por ahora, hemos establecido una sólida base sobre la cual construir esta funcionalidad.

¡Continúa mejorando tus habilidades de desarrollo y recuerda que cada nuevo aprendizaje es un paso más hacia el dominio de la programación de aplicaciones avanzadas!