动手实现react-redux

这篇文章主要讲 react-redux的实现原理，同时更好的去理解 react中高阶函数的应用

这里主要实现Provider组件和connect函数，新建react-redux文件夹，里面新建入口文件index.js，抛出对应组件和方法：

// react-redux/index.js
export {
  Provider,
  connect
}

第一次使用react-redux的时候，就感受有点像使用React.Context，可是子组件内部又是经过props拿到的数据和方法，这里面connect函数应该是作了处理，将state和actions从新包装后传给了子组件，因此第一步应该先建redux的的Context：

// context.js
import React from "react";
export default React.createContext();

紧接着建立 Provider.js文件：

//Provider.js
import React,{Component} from "react";
import ReduxContext from "./context";

export default class Provider extends Component {
  render(){
    return (
      <ReduxContext.Provider value={{ store: this.props.store }}>
        {this.props.children}
      </ReduxContext.Provider>
    )
  }
}

Provider.js拿到父组件传过来的store，并把它交给Provider，方便向下传递，接着就是渲染子组件了。

接下来建立connect.js，connect会返回一个函数而且接收渲染的的组件：

//connect.js
export default function (mapStateToProps,mapDispatchToProps){
    return function(WrapperComponent){}
}

咱们知道返回的函数最终也是通过执行后再抛出去的，因此返回的应该是一个类组件或者一个函数组件，这里用到类组件会比较合适，由于还要对订阅的更新视图函数进行销毁操做，而后store能够经过向下传递的context拿到：

//connect.js
import ReduxContext from './context'
import React, { Component } from 'react'
export default function (mapStateToProps, mapDispatchToProps) {
  return function (WrapperComponent) {
    return class extends Component {
      static contextType = ReduxContext
      constructor(props, context) {
        super(props);
        // 经过mapStateToProps 返回包装后的state，这里可方便用户拿到想要的state，同时优化渲染的组件
        this.state = mapStateToProps(context.store.getState())
      }
      componentDidMount() {
          // 订阅更新视图
        this.unSubscribe = this.context.store.subscribe(() => {
          this.setState(mapStateToProps(this.context.store.getState()))
        })
      }
      componentWillUnmount() {
        // 注销订阅
        this.unSubscribe()
      }
    }
  }
}

render里面经过传参的方式，就能够将store里面的值和处理过的action传给子组件了：

//connect.js
...
render() {
  // 处理绑定的action
  let actions = redux.bindActionCreator(mapDispatchToProps,this.context.store.dispatch);
  return <WrapperComponent {...this.state} {...actions} />
}
...