Creación de Reducers: If, Switch y Reducer Objects en React

¿Cómo crear un reducer en React?

Los reducers son elementos esenciales en la gestión del estado en aplicaciones React. Conocer diferentes formas de crearlos permite optimizar su funcionalidad y mejorar el manejo del estado en proyectos complejos. A continuación, exploraremos tres métodos para desarrollar un reducer, cada uno con sus particularidades y ventajas.

¿Qué pasos seguir para crear un reducer básico con if?

El primer método para la creación de reducer es mediante el uso de condicionales if, una técnica básica pero efectiva para quienes comienzan en programación. Sigue estos pasos:

1. Definición del estado inicial:

   • Inicia declarando una constante con tu estado inicial. Este debe ser un objeto que contenga toda la información necesaria para tu aplicación.

   const initialState = {
     error: false,
     loading: false,
     // otros estados iniciales
   };
   

2. Creación del reducer:

   • Los reducers son funciones que reciben dos parámetros: state y action.

   const reducer = (state, action) => {
     if (action.type === 'ERROR') {
       return {
         ...state,
         error: true,
         loading: false,
       };
     }
     if (action.type === 'CHECK') {
       return {
         ...state,
         loading: true,
       };
     }
     // Posibles condicionales adicionales
     return state;
   };
   

3. Manejo de default:

   • Al final de los condicionales, asegúrate de retornar el estado actual si ningún action.type coincide.

¿Cómo implementar un reducer usando switch?

La estructura switch es más popular para construir reducers dado su formato claro y limpio, lo cual facilita su lectura.

1. Estructura del switch:

   • Al igual que con los if, inicia con los parámetros state y action.

   const reducer = (state, action) => {
     switch (action.type) {
       case 'ERROR':
         return {
           ...state,
           error: true,
           loading: false,
         };
       case 'CHECK':
         return {
           ...state,
           loading: true,
         };
       default:
         return state;
     }
   };
   

2. Uso del default:

   • El default en un switch funge como un comodín para manejar acciones que no se ajustan a los casos definidos.

¿Qué es un reducer object y cómo se usa?

El método de los reducer objects es considerado el más elegante. Este utiliza objetos para definir los posibles estados de tu aplicación, resultando en un código más limpio y fácil de entender.

1. Creación del objeto de reducers:

   const reducerObject = {
     'ERROR': (state) => ({
       ...state,
       error: true,
       loading: false,
     }),
     'CHECK': (state) => ({
       ...state,
       loading: true,
     }),
   };
   

2. Función principal del reducer:

   • La función reducer se divide en dos partes: el objeto que contiene las funciones correspondientes a cada action.type, y una lógica para gestionar cuál función ejecutar.

   const reducer = (state, action) => {
     return reducerObject[action.type]
       ? reducerObject[action.type](state)
       : state;
   };
   

¿Por qué elegir un método sobre otro?

Conocer varios métodos te permite adaptarte a diferentes escenarios según las necesidades de tu aplicación o tus preferencias personales. La técnica de if es directa y útil para aprendizajes iniciales, switch es más organizado para múltiples casos, y los reducer objects proporcionan un enfoque limpio y modular. Cada opción tiene sus pros y contras, así que experimenta y decide cuál se ajusta mejor a tu flujo de trabajo. ¡Sigue explorando las capacidades de React y sigue aprendiendo para mejorar tus habilidades de desarrollo!