Read react-redux source - Zero

react technology stack you will encounter redux, redux need to use the react-redux react, then react-redux redux package is how it has been applied react?

What react-redux principle is it?

With these questions, look at the source code of the react-redux, a small harvest, write a blog to remember, easy to read later.

0.5 Preparation

Before continuing review some redux, react and react-redux necessary knowledge.

redux

redux for managing the state, state change response, simple description:

The function requires a redux createStore returned as the function of state parameters, this function is called a reducer.

Call createStore will be able to get a store. This store is stored in the state (the return value of the reducer), and can monitor the state change of the store by the subscribe method, of course, can be modified by the state dispatch method provided by the class store.

Specific API as follows:

// store.js
import { createStore } from 'redux'

// 3. 下面store每dispatch一次reducer就会重新执行并计算一次state
function reducer(state = {a: 1}, action) {
  const { type, payload } = action
  return payload
}

// 0. 创建一个store
const store = createStore(reducer)

// 1. 监听store中state的变更
store.subscribe((state) => {
  console.log(state)
})

// 2. 发送一个action来通知reducer修改state
// {type: 'type1', payload: 1} 就是一个ation
store.dispatch({
  type: 'type1',
  payload: {a: 2}
})

react

Update reasons react component may be a component of their own state update, props component update, the context-dependent component update caused. But look at the entire react applicable, component updates only one reason is that the current state update ancestor component or components caused.

react-redux

// App.js
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Example extends Component {
  render() {
    return <div onClick={this.props.dispatchA}>
      	{this.props.a}
      </div>
  }
}

function mapStateToProps(state) {
  return {...state}
}

function mapDispatchToProps(dispatch) {
  return {
    dispatchA() => {
    	dispatch({type: 'type', payload: {a: 10}})
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Example)

The above function call returns a connect higher-order component, a high order component after wrapping is completed assembly Example assembly connected to the redux.

Entry file

// index.js
import { Provider } from 'react-redux'
import store from './store'
import App from './App.js'

ReactDOM.render(<Privider store={store}>
    				<App />
               </Provider>)

Example of the components can be seen props from the parent component and store, subdivided has a parent component to pass state dispatch of his props as well as store and the store.

summary

Here we have a redux of the store, the store will notice changes in the external internal state by some method.

We know that the state change will cause changes in props react update a component.

Then we can set the component state to notify by certain properties of the component data is updated when changes in store in the state, then the time to get component updates the latest data from the store for render, in theory, can be achieved in applications react use the redux.

1. Understand the source directory structure

The directory structure is [email protected] version, in which we focus on components connect folders and folder contents. Under connect connect method to achieve the main directory, and the next component catalog is related React components used, such as higher-order components Provider and connect method returns.

hooks directory is the realization of hooks redux of usage, utils tools are some of the methods used.

Later we will focus on to the next directory and connect componet directory code.