关于react.js:动手实现reactredux

这篇文章次要讲 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} />
}
...