Cómo conectar React a Redux - una guía esquemática

Esta publicación está dirigida a personas que ya conocen React y Redux. Esto les ayudará a comprender mejor cómo funcionan las cosas bajo el capó. ¿Cuando entré por primera vez en el universo React ?, hace ~ 3 años, me costó mucho entender cómo funcionaban las m apStateToProps y m de Redux y cómo apDispatchToProps estaban disponibles para el componente React. Aquí hay una guía esquemática para comprender mejor cómo onnect funciona C de Redux con React.

Digamos que tenemos un Searchcomponente.

Y una tienda Redux clásica.

Llenemos la tienda Redux con Actiondespachadores y el Reducerestado.

El Reducer se defaultStateve así. El actionparámetro dentro de la Reducerfunción proviene del despachadoAction.

Conectemos el componente de búsqueda de React con la tienda Redux. La biblioteca React-Redux tiene enlaces oficiales de React para Redux.

Proporciona la connectfunción de conectar el componente a la tienda.

mapDispatchToPropssignifica asignar la dispatchfunción de la Acción a la del componente React this.props.

Lo mismo se aplica a mapStateToProps, donde el estado del Reducer se asigna al componente React this.props.

1. Conecta React a Redux.
2. El mapStateToPropsy mapDispatchToPropsofertas con la tienda de Redux statey dispatch, respectivamente.
3. Reducer's statey Action's dispatchestán disponibles a través this.propsdel componente React.

Resumamos todo el flujo de trabajo de React to Redux connect mediante un clic en el botón del componente de búsqueda de React.

1. Haga clic en el submitbotón en el componente de búsqueda React
2. La clickfunción envía una acción. La dispatchfunción Acción se conecta al componente de búsqueda mediante mapDispatchToPropsy está disponible parathis.props
3. (fuera del alcance de esta publicación) La acción enviada es responsable de los fetchdatos y envía otra acción para actualizar el estado del Reductor
4. El estado del Reductor se actualiza a sí mismo con los nuevos datos de búsqueda disponibles en el Paso 3.
5. El estado del reductor ya está conectado this.propsen el componente de búsqueda a través demapStateToProps
6. this.props tiene los datos de búsqueda más recientes y la vista ahora se vuelve a renderizar para mostrar los resultados de búsqueda actualizados