Creación de Reducers y Mapeo de Emojis en TypeScript

¿Cómo crear una función reductora en React?

En esta guía, exploraremos cómo desarrollar una función reductora que modifique el estado de un componente en React, permitiéndonos tanto agregar como eliminar elementos de un array. La creación de esta funcionalidad es crucial para administrar estados complejos dentro de las aplicaciones, y está especialmente diseñada para quienes trabajan con tipos y actions en una arquitectura basada en hooks.

¿Qué es una función reductora en React?

Una función reductora, o "reducer", es un patrón de diseño en React que permite modificar el estado de un componente de manera predecible. Al utilizar una función reductora, se puede gestionar el estado a través de acciones específicas que describen los cambios deseados.

Implementando el switch case en la función reductora

Para crear la función reductora necesitamos utilizar una estructura que nos permita manejar diferentes tipos de acciones. Aquí, el uso de switch case es ideal:

const todoReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            const newTodo = {
                id: state.todos.length + 1, // Generamos un ID sencillo
                text: action.payload.text
            };
            return {
                ...state,
                todos: [...state.todos, newTodo]
            };
        case 'REMOVE_TODO':
            return {
                ...state,
                todos: state.todos.filter(todo => todo.id !== action.payload.id)
            };
        default:
            return state;
    }
};

¿Cómo agregar elementos al estado?

Para agregar elementos, primero creamos un nuevo objeto newTodo que contendrá el texto y un ID. Este ID es generado de manera dinámica basado en la longitud actual del array de tareas (todos).

¿Cómo eliminar elementos del estado?

Para eliminar elementos, utilizamos el método filter del array, lo que permite filtrar el array de tareas (todos) dejando fuera el objeto cuyo ID coincide con el especificado en el payload de la acción.

Creación del mapeo de emojis

Antes de integrar nuestra función reductora, podemos crear un mapeo que asocie texto con emojis. Esto permitirá transformar textos en su representación emoji cuando los introduzcamos:

const emojiMap = {
    eat: '🍔',
    study: '📚',
    code: '💻'
};

¿Cómo tipar el mapeo en TypeScript?

Al trabajar con TypeScript, es importante definir los tipos de nuestro mapeo. Esto se logra declarando que tanto las claves como los valores del objeto son de tipo string:

const emojiMap: { [key: string]: string } = {
    eat: '🍔',
    study: '📚',
    code: '💻'
};

Integrando el reducer con el componente

El siguiente paso es crear un componente que despache las acciones hacia la función reductora, lo que permitirá ver los cambios en la interfaz de usuario. Aunque el componente aún no está implementado, es esencial planificar cómo se integrará con el useReducer.

En este viaje por el mundo de los reducers en React, hemos cubierto cómo implementar una lógica de agregar y eliminar, así como un mapeo básico de emojis. Con esta base sólida, invita a crear interfaces interactivas y funcionales. ¡Sigue explorando y perfeccionando tus habilidades en React, y descubre todo el potencial de los hooks para gestionar estados complejos!