Realization of connect and provider in react-redux

connect

First of all, if the application of redux in react is implemented normally. Take the class component as an example,

1. Generally, I heard this.stae={storeState:store.getState()} in the constructor() to get the state value in redux
2. Then use methods to dispatch actions, such as click events, and then trigger stote.patch(action). After listening to dispatch, modify the value of state in redux.
3. Then in componentDidMount, by monitoring store.subscribe(()=>{this.setState()}) to modify the state of the class component in real time.
4. And you need to register the listener in componentWillUnmount().
   If this is the case, each component will write repeated similar codes, resulting in code redundancy and inconvenient maintenance.
   react-redux provides connect high-level components to help us complete the above operations concisely and conveniently.

Most high-level components are actually a function. This function allows you to pass in a component, and then create a new component internally. Use the passed component as a sub-component of the new component. In addition, some new components are added. Some things, such as doing other things in the life cycle function, passing in more props, etc., in disguise to enhance the components you pass in, so that this ordinary component will become colorful after being modified by high-level components. Colorful.

Connect also does the same thing, let's define a connect function first.

This is the simplest connect, and now it is gradually improving its functions. The first is two parameters, we use A and B instead, generally
A is

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

An arrow function, this state is the value we want to pass after a while, just know what it looks like.
B is

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

We only need to know that there are two arrow functions.
We need to know why there is connect, because we don’t want to write store.subcribe and import store in componentDidUnmonut in each component. Therefore, we have to write these steps in our High-end components, connecting. Let’s take a
look at the code.

Let’s take a look at the Sao operation. We use a feature of high-level components to pass props to selectively pass the data in the store and some action methods to our components, so that we don’t need to use them in our components. Introduced store.
At this time, look at our two parameters.

We can choose to pass the counter to our component without passing other data, or choose to pass addNumber to the component without passing other methods. In this way, the component can get the value in the store through this.props.counter.

But this is just a transition, there is no monitoring and modification of the data that we just wanted. In fact, you only need to initialize the data through the constructor in the component returned by connect, monitor the value change through the life cycle function, change the value through this.setState() and re-render, which is equivalent to helping us inside the connect. To monitor and change, we don’t have to manually add them by ourselves. Look at the code

But sotre, we have to introduce it ourselves. If we encapsulate this function into a library, do we need users to modify your source code? Obviously this is not realistic, so what should I do?
At this time we must use our context object.
First of all, create our context object.
In fact, the idea has come out at this time. We only need it.
Then we only need
to pass the store we want to the value in the Index file of the entrance . At this time, we only need to modify the connect function. The code, change all sotre to this.context,

so that our connect package is basically completed.
In fact, the conncet and Provider in react-redux are also the same, but he does more things, and his store is passed to the store, not the value.