Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

220
Vistas
Redux: ¿Es común hacer una comparación profunda en el reductor y devolver el estado original si no hay cambios?
  • Acción: obtenga una matriz de datos del servidor.
  • Reductor: guarde una matriz de datos para almacenar.

Mi reductor guarda la matriz de datos de la manera inmutable esperada:

 return { ...state, arrayOfData: fetchedArrayOfData, };

La acción de búsqueda ocurre periódicamente, pero el contenido de la matriz permanece igual la mayor parte del tiempo. Sin embargo, dado que se guarda una nueva referencia cada vez, el selector para estos datos se considerará "cambiado" y no se memoriza bien si se usa como entrada para creatorSelector .

La única solución que se me ocurre es realizar una comparación profunda en el reductor y, si el contenido es el mismo, simplemente devolver el estado original:

 return state;

Si esta práctica/patrón común?

Nota: Traté de mirar alrededor, y la mayoría de los proyectos están haciendo lo mismo que yo estaba haciendo (es decir, devolver un nuevo objeto de estado), lo que no se memorizará bien y hará que se ejecuten las transformaciones del selector.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Hay algunas soluciones como usar immutableJS como se menciona en los comentarios, pero puede devolver su estado condicionalmente comparando su fetchedArrayOfData con el último (que está almacenado en su estado).

Suponga que hay una función de comparación que proporciona dos matrices y las compara.

En el reductor:

 const previousFetchedData = state.fetchedArrayOfData; const newFetchedData = action.payload.fetchedArrayOfData; const resultOfComparision = isSameArray(previousFetchedData, newFetchedData) // true or false if (resultOfComparision) { // case of same arrays return state } else { // case of different arrays ...state, arrayOfData: fetchedArrayOfData, };

Nota 1: puede crear su propia función de comparación, pero hay muchas buenas en esta publicación de StackOverflow que puede usar.

Nota 2: el uso de immutableJs y datos de devolución condicionales del reductor es común (en tal escenario) y no se preocupe por usarlos.

Nota 3: también puede comparar sus datos a nivel de componente usando la forma tradicional con shouldComponentUpdate .

Nodo 4: el uso de middlewares como redux-saga será útil, también puede implementar la función isSameArray en la saga y luego enviar la acción adecuada. Lea más sobre la documentación de la saga .

Nota 5: La mejor solución (en mi opinión) es manejar este caso en los servicios de back-end con el estado 304 , lo que significa No modificado . entonces puede determinar fácilmente la acción correcta de acuerdo con el estado de la respuesta. más información sobre la documentación de MDN .

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda