Teoría

Los reducers son funciones puras que especifican cómo debe cambiar el estado en respuesta a las acciones enviadas. Al recibir el estado actual y una acción como parámetros, los reducers devuelven el nuevo estado de la aplicación.

Práctica

En la carpeta reducers de nuestro proyecto, tenemos el archivo counterReducer.js donde definimos el reducer para la funcionalidad del contador:

import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;

Explicación del código:

• Línea 1: Importa la función createReducer del paquete @reduxjs/toolkit. Esta función se utiliza para crear reducers en Redux;
• Línea 2: Importa los creadores de acciones increment y decrement del archivo ../actions/counterAction.js. Estos creadores de acciones se utilizan para definir las acciones que manejará el reducer;
• Línea 4: Define la constante initialState en 0. Esto representa el valor inicial del contador en el store de Redux;
• Línea 6: Utiliza la función createReducer para definir el counterReducer;
• Líneas 6-11: La función createReducer recibe dos argumentos: el initialState y una función de callback que define cómo debe actualizarse el estado según las acciones enviadas;
• Línea 7: Utiliza el objeto builder para definir los casos para diferentes acciones dentro de la función de callback;
• Líneas 9, 10: Utiliza el método addCase del objeto builder para definir cómo debe actualizarse el estado cuando se envían acciones específicas, como increment y decrement;
• Líneas 9, 10: La función de callback dentro de addCase recibe el estado actual (state) como argumento y devuelve el nuevo estado después de aplicar la acción correspondiente;
• En este caso, cuando se envía la acción increment, el estado se incrementa en 1; cuando se envía la acción decrement, el estado se decrementa en 1;
• Línea 13: Finalmente, exporta el counterReducer como exportación por defecto del módulo.

Nota

En resumen, el counterReducer gestionará las acciones enviadas y actualizará el estado del contador en el store de Redux según corresponda.