关于react.js:动手实现reactredux

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

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

// react-redux/index.jsexport {  Provider,  connect}

第一次应用react-redux的时候，就感觉有点像应用React.Context，然而子组件外部又是通过props拿到的数据和办法，这外面connect函数应该是做了解决，将state和actions从新包装后传给了子组件，所以第一步应该先建redux的的Context：

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

紧接着创立 Provider.js文件：

//Provider.jsimport 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.jsexport default function (mapStateToProps,mapDispatchToProps){    return function(WrapperComponent){}}

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

//connect.jsimport 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} />}...