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

Construye una lista de emojis robusta con Redux Toolkit y TypeScript: define tipos claros, usa createReducer y aplica acciones precisas para agregar y eliminar elementos. Aquí verás el flujo completo con payload, state y addCase, tal como se implementa en un proyecto real.

¿Qué construimos en el reducer para la lista de emojis?

Creamos un reducer que parte de un estado inicial vacío y define cómo se modifica al recibir acciones para agregar y eliminar. Se apoya en createReducer de Redux Toolkit y en tipos de TypeScript para mantener el código claro y seguro.

¿Cómo definimos los tipos Todo y el estado global?

• Tipo Todo con id numérico y texto de la tarea.
• Estado global como lista de Todos.
• Estado inicial como array vacío.

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

// Estado global
type TodosState = Todo[];

// Estado inicial
const initialState: TodosState = [];

¿Cómo se crea el reducer con createReducer?

• Se importa createReducer desde Redux Toolkit.
• Se construye con un builder para encadenar addCase.
• Se importan las acciones addTodo y removeTodo desde TodoActions.

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

const TodoReducer = createReducer(initialState, builder => {
  // Casos se agregan con builder.addCase
});

export default TodoReducer;

¿Cómo se agregan y eliminan Todos con acciones?

Se definen dos casos con addCase: uno para agregar con addTodo y otro para eliminar con removeTodo. Se accede a state y a action para leer el payload y actualizar el estado.

¿Qué hace addTodo al modificar el estado?

• Toma el estado actual para conocer la longitud del array.
• Crea un objeto con id incremental: length + 1 empieza en 1.
• Usa el payload como texto del nuevo Todo.
• Inserta el elemento con push.

builder.addCase(addTodo, (state, action) => {
  const newTodo: Todo = {
    id: state.length + 1, // el primer id será 1
    text: action.payload, // texto capturado del input
  };
  state.push(newTodo);
});

¿Cómo removeTodo filtra por id?

• Recibe el id a eliminar en el payload.
• Devuelve un nuevo array con filter.
• Compara por id para remover el elemento correcto.

builder.addCase(removeTodo, (state, action) => {
  return state.filter(todo => todo.id !== action.payload);
});

¿Qué habilidades y conceptos refuerzas al implementar TodoReducer?

Dominas el flujo completo: componente que hace dispatch, acción con payload y reducer que actualiza el estado global con seguridad y simplicidad.

• Modelado estricto con TypeScript: id como number y text como string.
• Gestión de estado global con createReducer y builder.addCase.
• Mutación controlada del array con push y retorno inmutable con filter.
• Identificadores predecibles: id basado en la longitud del estado + 1.
• Organización del código: imports de acciones y export default del reducer.

¿Quieres ver cómo capturar el input y renderizar la lista con TodoList? Cuéntame en comentarios qué parte te gustaría profundizar o qué dudas tienes.