Realización de connect y proveedor en react-redux

conectar

En primer lugar, si la aplicación de redux en react se implementa normalmente. Tome el componente de la clase como ejemplo,

1. Generalmente, escuché this.stae = {storeState: store.getState ()} en el constructor () para obtener el valor del estado en redux
2. Luego use métodos para enviar acciones, como eventos de clic, y luego active stote.patch (acción). Después de escuchar el envío, modifique el valor de estado en redux.
3. Luego, en componentDidMount, monitoreando store.subscribe (() => {this.setState ()}) para modificar el estado del componente de la clase en tiempo real.
4. Y necesita registrar el oyente en componentWillUnmount ().
   Si este es el caso, cada componente escribirá códigos similares repetidos, lo que dará como resultado una redundancia de código y un mantenimiento inconveniente.
   react-redux proporciona conectar componentes de alto nivel para ayudarnos a completar las operaciones anteriores de manera concisa y conveniente.

La mayoría de los componentes de alto nivel son en realidad una función. Esta función le permite pasar un componente y luego crear un nuevo componente internamente. Utilice el componente pasado como un subcomponente del nuevo componente. Además, se agregan algunos componentes nuevos Algunas cosas, como hacer otras cosas en la función de ciclo de vida, pasar más accesorios, etc., disfrazadas para mejorar los componentes que pasa, de modo que este componente ordinario se vuelva colorido después de ser modificado por componentes de alto nivel. Vistoso.

Connect también hace lo mismo, definamos primero una función de conexión.

Esta es la conexión más fácil y ahora está mejorando gradualmente sus funciones. El primero son dos parámetros, usamos A y B en su lugar, generalmente
A es

const mapStateToProps = state => {
    
    
  return {
    
    
    counter: state.counter
  }
}

Una función de flecha, este estado es el valor que queremos pasar después de un tiempo, solo sepa cómo se ve.
B es

const mapDispatchToProps = dispatch => {
    
    
  return {
    
    
    addNumber: function(number) {
    
    
      dispatch(addAction(number));
    }
  }
}

Solo necesitamos saber que hay dos funciones de flecha.
Necesitamos saber por qué hay conexión porque no queremos escribir store.subcribe e import store en componentDidUnut en cada componente. Por lo tanto, tenemos que escribir estos pasos en nuestro Componentes de alta gama, conectando. Echemos un
vistazo al código.

Echemos un vistazo a la operación de Sao. Usamos una función de componentes de alto nivel para pasar accesorios para pasar selectivamente los datos en la tienda y algunos métodos de acción a nuestros componentes, de modo que no No es necesario utilizarlos en nuestros componentes. Tienda introducida.
En este momento, mire nuestros dos parámetros.

Podemos elegir pasar el contador a nuestro componente sin pasar otros datos, o elegir pasar addNumber al componente sin pasar otros métodos. De esta forma, el componente puede obtener el valor en la tienda a través de this.props.counter.

Pero esto es solo una transición, no hay monitoreo ni modificación de los datos que solo queríamos. De hecho, solo necesita inicializar los datos a través del constructor en el componente devuelto por connect, monitorear el cambio de valor a través de la función de ciclo de vida, cambiar el valor a través de this.setState () y volver a renderizar, lo que equivale a ayudarnos dentro de la conexión. Para monitorear y cambiar, no tenemos que agregarlos manualmente nosotros mismos. Mira el codigo

Pero sotre, tenemos que presentarlo nosotros mismos. Si encapsulamos esta función en una biblioteca, ¿necesitamos que los usuarios modifiquen su código fuente? Obviamente, esto no es realista, entonces, ¿qué debo hacer?
En este momento debemos usar nuestro objeto de contexto.
En primer lugar, crea nuestro objeto de contexto.
De hecho, la idea ha surgido en este momento. Solo lo necesitamos.
Luego solo necesitamos
pasar la tienda que queremos al valor en el archivo de índice de la entrada . En este momento , solo necesitamos modificar la función de conexión. El código, cambia todo sotre a this.context,

para que nuestro paquete de conexión esté básicamente completado.
De hecho, el conncet y el Proveedor en react-redux también son lo mismo, pero él hace más cosas y su tienda se pasa a la tienda, no el valor.