Manejo de estados con useReducer en React

¿Cómo usar UseReducer para manejar estados en React?

Entender y manejar estados en aplicaciones React puede parecer desafiante, pero con el enfoque correcto y las herramientas adecuadas, como UseReducer, puedes hacerlo de manera más clara y eficiente. UseReducer es una función de React que te permite manejar el estado de tus componentes de una manera más declarativa. Aprender a usar esta herramienta te permitirá mejorar la organización y eficiencia de tu código, asegurando que tu aplicación sea más fácil de mantener y escalar.

¿Cómo se implementa UseReducer?

Primero que nada, copiar y pegar el componente que habías hecho con UseState es un buen inicio. Pero ahora, ajustemos ese código para trabajar con UseReducer:

1. Cambia el componente a UseReducer.
2. En el export del componente, asegúrate de renombrarlo a UseReducer.
3. Sustituye React.UseState por React.UseReducer.

const [state, dispatch] = React.useReducer(reducer, InitialState);

Donde reducer es la función que define qué estado necesita cambiar ante una acción, e InitialState es el objeto que contiene el estado inicial del componente.

¿Qué es un reducer y cómo funciona?

El reducer es una función especial que define cómo las acciones transforman el estado del componente en un nuevo estado. Acepta dos parámetros: el estado actual y la acción que se desea realizar. La función retorna el nuevo estado.

Creación de un ReducerObject

Puedes optar por manejar tu reducer como un objeto que define directamente cómo cada acción cambiará el estado, utilizando un reducerObject.

const reducer = (state, action) => {
    switch(action.type) {
        case 'CONFIRM':
            return { ...state, confirmed: true };
        case 'ERROR':
            return { ...state, error: true };
        // Más casos de acción
        default:
            return state;
    }
};

O con un objeto más compacto:

const reducerObject = {
    CONFIRM: (state) => ({ ...state, confirmed: true }),
    ERROR: (state) => ({ ...state, error: true }),
    // Más tipos de acción...
};

¿Cómo manejar funciones actualizadoras de estado con dispatch?

El método dispatch ayuda a despachar acciones en el estado. En lugar de usar funciones como setState para modificar el estado, defines las acciones que pueden enviarse al reducer.

const onConfirm = () => dispatch({ type: 'CONFIRM' });
const onError = () => dispatch({ type: 'ERROR' });
// Más funciones de acción...

¿Cómo gestionar payloads con dispatch?

Algunas acciones pueden necesitar datos adicionales, conocidos como payload, para actualizar el estado.

const onChange = (value) => dispatch({ type: 'WRITE', payload: value });

En el reducer, el payload puede ser utilizado para realizar la actualización necesaria del estado:

const reducer = (state, action) => {
    switch(action.type) {
        case 'WRITE':
            return { ...state, value: action.payload };
        // Otros casos...
    }
};

¿Cómo validar que el estado está funcionando correctamente?

Es crucial probar todo tras haber implementado UseReducer. Puedes hacer un seguimiento de los cambios en el estado con console.log.

console.log(state);

Implementación de objetos reducer para estados más limpios

Para tener un código aún más limpio y declarativo, es posible gestionar tu reducer en forma de objetos que alojen las transformaciones para cada acción.

const newState = reducerObject[action.type](state, action.payload);

Finalmente, recuerda que la decisión de cuándo utilizar un enfoque declarativo más complejo depende de la naturaleza de tu aplicación y tus prioridades de legibilidad y mantenimiento del código. Experimenta con UseReducer y comprueba cómo transforma tu forma de manejar estados en React. ¡Sigue practicando y desarrollando tus habilidades en React!