Ir al contenido principal
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Conceptos Previos sobre Reductores

Como se describe en "Conceptos Fundamentales de Redux" Parte 3: Estado, Acciones y Reductores, una función reductora de Redux:

  • Debe tener una firma (previousState, action) => newState, similar al tipo de función que pasarías a Array.prototype.reduce(reducer, ?initialValue)

  • Debe ser "pura", lo que significa que el reductor:

    • No realiza efectos secundarios (como llamar a APIs o modificar objetos/variables externos).
    • No llama a funciones no puras (como Date.now o Math.random).
    • No muta sus argumentos. Si actualiza el estado, no debe modificar el objeto de estado existente directamente. En su lugar, debe generar un nuevo objeto con los cambios necesarios. Este mismo enfoque debe aplicarse a cualquier subobjeto dentro del estado que actualice.
Nota sobre inmutabilidad, efectos secundarios y mutación​

La mutación se desaconseja porque generalmente rompe la depuración de viaje en el tiempo y la función connect de React Redux:

  • Para el viaje en el tiempo, las Redux DevTools esperan que al reproducir acciones registradas se obtenga un valor de estado, sin alterar nada más. Los efectos secundarios como mutaciones o comportamientos asíncronos alterarán el comportamiento entre pasos durante el viaje, rompiendo la aplicación.
  • En React Redux, connect verifica si los props devueltos por mapStateToProps han cambiado para determinar si un componente necesita actualizarse. Para mejorar el rendimiento, connect toma atajos que dependen de la inmutabilidad del estado y usa comprobaciones superficiales de igualdad referencial. Esto significa que los cambios en objetos y arrays por mutación directa no serán detectados, y los componentes no se volverán a renderizar.

Otros efectos secundarios como generar IDs únicos o marcas temporales en un reductor también hacen el código impredecible y más difícil de depurar y probar.

Debido a estas reglas, es crucial comprender completamente los siguientes conceptos antes de avanzar a otras técnicas específicas para organizar reductores en Redux:

Conceptos Básicos de Reductores en Redux​

Conceptos clave:

  • Pensar en términos de estado y estructura del estado

  • Delegar responsabilidad de actualización por porción del estado (composición de reductores)

  • Reductores de orden superior

  • Definir el estado inicial del reductor

Lecturas recomendadas:

Funciones Puras y Efectos Secundarios​

Conceptos clave:

  • Efectos secundarios

  • Funciones puras

  • Cómo pensar en términos de combinación de funciones

Lista de lecturas:

Gestión de datos inmutables​

Conceptos clave:

  • Mutabilidad vs inmutabilidad

  • Actualización segura e inmutable de objetos y arrays

  • Evitar funciones y sentencias que muten el estado

Lista de lecturas:

Normalización de datos​

Conceptos clave:

  • Estructura y organización de bases de datos

  • División de datos relacionales/anidados en tablas separadas

  • Almacenar una única definición para cada elemento

  • Referenciar elementos mediante IDs

  • Usar objetos indexados por IDs como tablas de búsqueda, y arrays de IDs para gestionar el orden

  • Asociar elementos en relaciones

Lista de lecturas: