javascript - example - react js change title

¿Cómo se mezcla componentDidMount() con react-redux connect()?

Question

Esto parece un caso de uso simple pero no puedo resolverlo. Quiero mostrar una lista de elementos recuperados de una solicitud a una API remota a través de HTTP. Me gustaría que la pantalla se muestre en blanco inicialmente mientras se lleva a cabo la solicitud, y luego se rellena con los resultados cuando estén disponibles.

Así que pensé que tendría dos componentes: el componente de "lista de elementos" tonto y un componente de "presentación" de envoltura que eh, de alguna manera inicia la solicitud remota al representar el componente tonto con la lista de elementos vacía del estado.

Sé cómo iniciar una solicitud remota inicial: use componentDidMount() .

y sé cómo manejar el envío / conexión: quiero usar algo como:

const OuterWrapper = connect(
   mapStateToProps,
   mapDispatchToProps
) (ItemList)

¿Pero cómo consigo que estas cosas jueguen juntas? Usar connect() parece poner las cosas fuera de alcance. Quiero iniciar de forma asíncrona la solicitud de la API, y luego hacer de alguna manera un `dispatch (updateItemList (items)) para decirle al mundo que hay nuevos elementos que agregar al estado.

EDITAR:

Encontré el react-lifecycle-component , pero no entiendo el uso de ejemplo, antes y después. En el caso más largo, ¿por qué se getAllTehDatas referencia a getAllTehDatas dos veces? ¿Por qué está en mapDispatchToProps claramente sin un par key:value ? ¿Por qué es necesario en absoluto si componentDidMount() llama? ¿Y qué haces si ese método necesita hacer uso de dispatch() ?

Answer 1

Primero, acerca de su edición, que el componente en ese repositorio está destinado a permitirle pasar funciones al componente como accesorios. Se ejecutarán siempre que se ejecuten los métodos de ciclo de vida de React . Esto es útil por razones. Pero esas razones se explican en ese repo y no son relevantes para su pregunta.

Además, viste esto:

const mapDispatchToProps = { getAllTehDatas };

Esta es la notación abreviada de ES6. Solo significa:

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

Es decir, el nombre de la propiedad es el mismo que el nombre de la variable. Debido a que es una operación tan común, a alguien inteligente se le ocurrió esta taquigrafía. Puede ser muy confuso si no lo sabes. Deberías leer sobre es6 .

Adelante.

Hay una serie de conceptos que no están claramente delineados. Componentes tontos. Componentes inteligentes. Componentes del contenedor. Componentes de la presentación. Componentes conectados. Componentes funcionales puros. Es mucho.

Los componentes del contenedor son componentes inteligentes y los componentes de presentación son componentes simples.

A veces los componentes tontos son un poco inteligentes. Tal vez tengan una animación sobre el mouse. Incluso pueden tener estado.

Los componentes funcionales puros son solo una función. Así que no hay métodos ni estado. Eso significa sólo accesorios. Dado que no puede haber estado ni lógica adicional, los componentes funcionales puros son siempre de presentación.

Un componente conectado es un componente de orden superior. Esto es solo un componente principal que procesa tu componente como un elemento secundario. También hace un poco de magia para optimizar la representación.

Los componentes de presentación solo deben mostrar cosas pero no hacer cosas. Si las cosas se hacen al hacer clic o escribirlas, debe ser manejado por un padre, que puede pasar los controladores al componente de presentación. Los componentes de presentación pueden hacer algunas cosas, pero estas cosas no deben influir en nada que esté fuera de ellas.

Se supone que los componentes del contenedor determinan lo que sucede. Es donde la lógica se atasca. Es más un concepto React que un concepto Redux.

Los componentes conectados se crean con connect . Cuando eso se llama, pasamos algunas funciones. mapStateToProps y mapDispatchToProps .

mapStateToProps puede hacer todo lo que necesita para generar algunos accesorios para que los utilice su componente. Esto significa que su componente puede usar estos accesorios sin tener que procesar más los datos. Todo el procesamiento necesario se puede hacer en mapStateToProps .

mapDispatchToProps puede hacer todo lo necesario para pasar funciones que se utilizan directamente como controladores de eventos. A menudo, pasamos a creadores de acciones vinculadas, que normalmente ya hacen todo lo que el controlador debe hacer de todos modos. Pero podemos pasar cualquier función y darle cualquier nombre. Así que podemos llamarlo onClick y pasar cualquier función que nos guste. También puede crear creadores de acción complejos con la ayuda de Redux-Thunk para convertir cualquier controlador de eventos en un creador de acción inteligente. Los creadores de acciones de Thunked tienen acceso al envío y al estado.

Los 2 párrafos anteriores describen un punto interesante: el HOC creado mediante la connect con la ayuda de nuestros mapStateToProps y mapDispatchToProps puede mapDispatchToProps fácilmente en un componente inteligente completo, y el componente envuelto puede ser completamente de presentación, incluso si el HOC resultante es inteligente. cosas.

O obtén esto: puedes connect un componente ya conectado. Alucinante, seguramente. ¿Es útil hacerlo? Por supuesto que podría ser. Un componente puede necesitar algunos datos generales del estado donde sea que se use. Lo connect a esos datos. El componente resultante se puede connect a los datos específicos del lugar donde se usa en otros lugares. ¿Común? No. Útil? ¡Sí!

También puede envolver un componente de presentación en un componente contenedor que luego se envuelve con connect . Esto podría ser lo que estás buscando. Luego puede usar componentDidMount para realizar la búsqueda en el componente contenedor.

Pero los componentes de presentación solo se separan de manera útil de su inteligencia por dos razones:

• Reusabilidad
• Probabilidad

Si no necesita ninguno, entonces no debe separar los dos. ¿Por qué complicar las cosas sin ganancia?

Además, use componentDidMount , no componentWillMount . Este último también se ejecuta en el lado del servidor, si utiliza componentes universales. No quieres que tu búsqueda se ejecute en el servidor.

Tenga en cuenta que a pesar de que un componente conectado es claramente un envoltorio, no debe pensar en eso. Piense en ello como una versión enchufada del original. El envoltorio es solo un detalle de implementación. Además, la envoltura es creada y mantenida por React-Redux y sus intestinos no se deben ensuciar. Esto significa que no puede cambiar el componentDidMount de la envoltura, o cualquier otra parte para el caso. Y cuando digo que no puedes, quiero decir que puedes, pero realmente no deberías.

Para resumir, recomiendo comprender React, Redux y React-Redux. Van bien juntos, pero no son lo mismo.

Después de comprender los conceptos, solo haces lo que crees que es mejor. Has tus propias reglas.

Answer 2

Esta respuesta que hice hace un tiempo le da un ejemplo de cómo usar adecuadamente conectar y hacer una llamada de acción en el componente. La única diferencia es que está en componentWillMount para mí: P