javascript - react - Re-renderización del componente connect() ed basado en la salida mapStateToProps

react js con redux

Question

En un proyecto basado en React + Redux, tengo un componente de connect() ed que verifica los permisos de usuario a través de una búsqueda de API. Los permisos recuperados se almacenan en la tienda de Redux.

El componente básicamente se ve como <Can check="...">...</Can> , que habla con nuestra API (a través de acciones de Redux) para resolver el cheque. Si se concede el permiso, this.props.children se representa, null caso contrario.

Para eso, mapStateToProps() calcula un apoyo de passes partir de datos de autorización en la tienda, que se comprueba en el método <Can /> s render() . ownProps parámetro ownProps para mapStateToProps() para obtener el "material a verificar" y calcular el indicador de passes .

Hay un poco de almacenamiento en caché, así que no vuelvo a buscar en cada montaje de componente, y básicamente funciona. Sin embargo, a veces el componente no volverá a reproducirse cuando las actualizaciones de passes actualicen en true (sin embargo, se procesará después de navegar, usar el enrutador de reacción y viceversa, por lo tanto, básicamente si el componente se vuelve a montar).

¿Los componentes connect() ed se vuelven a renderizar si la salida de mapStateToProps() cambia? Los documentos para connect() de react-redux dicen esto:

Si ownProps se especifica como un segundo argumento, su valor será el apoyo pasado a su componente, y mapStateToProps se volverá a invocar cada vez que el componente recibe nuevos apoyos.

¿Significa eso que pasar en ownProps cambia el renderizado para volver a hacer solo si los accesorios cambian, o de alguna otra manera? ¿Cómo puedo entender la nota con respecto a la memorización / devolución de una función de mapStateToProps() , o eso ni siquiera está relacionado?

Gracias

Answer 1

¿Los componentes connect () ed se vuelven a renderizar si la salida de mapStateToProps () cambia? Los documentos para connect () de react-redux dicen esto:

La salida de una función no puede cambiar por sí misma. Algo debe activar esta función para ser reevaluado en primer lugar.

Si el estado de Redux cambia, mapStateToProps se vuelve a evaluar.

Si los apoyos recibidos del componente padre son poco desiguales (han cambiado) y usa el argumento mapStateToProps , mapStateToProps también se vuelve a evaluar.

Si mapStateToProps devolvió valores poco profundos a su última llamada, React Redux omitirá la representación. Si devuelve valores poco desiguales, el componente envuelto se volverá a procesar. Se supone que mapStateToProps sí mismo es una función pura.

A veces, sin embargo, el componente no volverá a reproducirse cuando el pase se actualice a verdadero

Cree un proyecto mínimo reproduciendo esto y presente un problema con el ejemplo del código correspondiente.

¿Cómo puedo entender la nota con respecto a la memorización / devolución de una función de mapStateToProps (), o eso ni siquiera está relacionado?

No relacionado.

Answer 2

Varias cosas para saber aquí:

1. connect comparará poco a poco la salida de la última llamada de mapState a la llamada de mapState actual. Si nada ha cambiado, no volverá a procesar el componente envuelto.
2. De forma predeterminada, connect solo ejecutará mapState cuando la tienda notifique a los suscriptores. Sin embargo, si se declara que su función mapState toma dos parámetros, connect pasará a los accesorios del componente envuelto como segundo arg, lo que le permite hacer cosas como state.somePerItemData[ownProps.itemId] . También llama a mapState cada vez que difieren las props entrantes, ya que eso puede afectar la salida de mapState .
3. La memorización predeterminada de Reselect solo mantiene un único valor en caché por función de selector. Si tiene un componente que se instancia varias veces y todas las instancias comparten la misma instancia de función de selector, entonces la memoria del selector probablemente no funcionará de la manera que desee, ya que cada instancia de componente probablemente lo llame con diferentes entradas (como sus propios accesorios). Por lo tanto, como una optimización altamente avanzada, puede pasar una función de fábrica como el argumento mapState , que podría crear una instancia de función de selector única para cada instancia de componente.

Dicho todo esto, me temo que no tengo una respuesta específica para su pregunta real sobre el componente no actualizado. Probablemente necesite ver el código con más detalle.