react-redux 原理及基本实现

发表于

react-redux 核心组件

Provider组件： 该组件接收一个store属性 将其内容挂载在context上 这样后代才可以都有办法拿到

高阶组件connect： 这个组件第一次执行传递两个’函数’分别是需要映射到props上的state和action(可以是对象，react-redux会自动调用redux中的bindActionCreators方法包装对象，把对象的每一个属性包装成dispatch方法并返回一个新对象)；该组件执行返回的函数传入需要包装的组件，connect会把相应的state和dispatch当做属性传递给传入的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from "react"
import PropTypes from "prop-types"
import {bindActionCreators} from 'redux'

class Provider extends React.Component{
  static childContextTypes={
    //设置上下的类型是对象
    store:PropTypes.object
  };
  getChildContext(){
    //获取并设置后代上下文的内容
    return {store:this.props.store}
  }
  render(){
    return this.props.children;
  }
}
let connect =(mapStateToProps,mapDispatchToProps)=>(C)=>{
  return class Proxy extends React.Component{
    static contextTypes={
      store:PropTypes.object
    };
    constructor(props,context){
      super();
      //将参数mapStateToProps 的解构赋值代理组件的状态
      this.state=mapStateToProps(context.store.getState())
    }
    componentDidMount(){
      this.unsubscribe = this.context.store.subscribe(()=>{
        this.setState(mapStateToProps(this.context.store.getState()))
      })
    }
    componentWillUnmount(){
      this.unsubscribe()
    }
    render(){
      let _disPatch;
      if(typeof mapDispatchToProps === 'function'){
        _disPatch = mapDispatchToProps(this.context.store.dispatch);
      }else {
        _disPatch = bindActionCreators(mapDispatchToProps,this.context.store.dispatch)
      }

      return <C {...this.state} {..._disPatch}/>
    }
  }
};
export {Provider,connect}