redux-reaccionar-gancho

Sabemos que la comunicación entre componentes se puede realizar pasando valores a través de accesorios, pero si hay una variable que debe usarse globalmente, será un poco problemático pasarla a través de esta capa. método por capas.

Antes de presentar esto, procedamos paso a paso, comenzando con redux:

redux es un pollo frito importante en el grupo de la familia React. Su uso básico es el siguiente. sigue:

(1) Generación de tienda (utilizada para almacenar el estado global)

(2) Reductor (actualiza el estado según el estado y la acción)

Qué datos tengo? Ejemplo de uso de redux en reaccionar

Además de usar redux, también podemos usar el proveedor y los métodos de conexión proporcionados por reaccionar-redux

Explicación del sitio web oficial:

Si desea utilizar store en un componente, necesita utilizar la conexión connect, connect acepta cuatro parámetros:

función connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

①mapStateToProps

mapStateToProps?: ( state, ownProps?) =gt; Objeto

Asigna el estado externo a los accesorios internos y acepta el estado como parámetro. Por ejemplo, puedo obtener un determinado estado en el estado a través de la identificación especificada por los elementos internos de la matriz arr[id].

Cuando cambie el estado o ownProps, se volverá a llamar a mapStateToProps

②mapDispatchToProps

mapDispatchToProps?: Object (dispatch, ownProps?) =gt; p> p>

Función: vincular acción como accesorios al componente

Como segundo parámetro de conexión, si es un tipo de función, solo admite dos parámetros como máximo, y el primero debe ser despacho, y necesitas usar despacho para distribuir la acción

o usar bindActionCreators

③mergeProps

mergeProps?: (stateProps, despachoProps, ownProps) =gt; Objeto

Si este parámetro no está definido, { ...ownProps, ...stateProps, ...dispatchProps} se utilizará de forma predeterminada

Estos tres parámetros son mapStateToProps(. ), mapDispatchToProps() y El resultado de los accesorios del componente contenedor

④options

opciones?: Objeto

Solo se admite en react-reduxgt;=6.0 versión

Dirección del documento oficial

reaccionar-hook es una forma de convertir componentes de clase en componentes funcionales

Usar comunicación redux en reaccionar-hook es redux-react- gancho

Cómo obtener la tienda en un subcomponente: directamente a través de StoreContext

Entonces, ¿cómo se crea la tienda? En este momento, se usa createStore

¿El? segundo paso de la devolución de llamada Se utiliza un parámetro para comparar si este parámetro ha cambiado para decidir si se actualiza la función

Crear almacenamiento redux de forma personalizada:

Artículo de referencia

Material de referencia de las pepitas