Redux和React-Redux的实现（二）：Provider组件和connect的实现

接着上一篇讲，上一篇咱们实现了本身的Redux和介绍了React的context以及Provider的原理。

1. Provider组件的实现

---

Provider组件主要有如下下两个做用

1. 在整个应用上包一层，使整个应用成为Provider的子组件
2. 接收Redux的store做为props，经过context对象传递给子组件，全部的子组件均可以取得store

首先咱们要知道，Provider组件的任务是将stroe传递给子组件，它只是一个传递数据的组件，只须要将子组件展现出来就好。

import React from 'react'
import PropTypes from 'prop-types'

export class Provider extends React.Component{
    static childContextTypes = {
        store: PropTypes.object
    }
    getChildContext(){
        return {store:this.store}
    }
    constructor(props, context){
        super(props, context)
        this.store = props.store
    }
    render(){
        return this.props.children
    }
}

2. connect方法

---

connect的做用就是将React和Redux中的store链接起来

首先要明确它的任务：

1. 接收一个组件，将Redux中的store经过props传递给组件
2. 将Redux中的action也经过props传递给组件
3. 返回一个新的组件，这个组件能够经过this.props访问到store中的属性，也多是触发action
4. 当store中的数据发生变化的时候，通知新的组件

根据它的任务就能知道，它是一个高阶函数

connect方法定义

官方给出connect的定义：

connect([mapStateToProps],  [mapDispatchToProps],  [mergeProps],  [options])

很是好理解了，在React-Redux中，咱们经常使用的就是前两个参数。

mapStateToProps

这个函数帮助咱们将store中的数据做为props传递给组件，也就是实现了connect方法的第一个任务

mapStateToProps(state, ownProps) : stateProps

1. mapStateToProps的第一个参数就是Redux的store
2. 第二个参数就是本身的props，也可已将本身的props和store merge到一块儿传递给组件

咱们常常这么使用mapStateToProps

state=>({ num: state})

或者这样只获取咱们当前须要的属性

const mapStateToProps = (state) => {
  return {
    num: state.num
  }
}

mapDispatchToProps

这个函数的会将action以props的形式传递给组件，组件可用this.props触发相应action，也就是完成了上面的第二个任务。

mapDispatchToProps(dispatch, ownProps): dispatchProps

这个函数返回的是装有action的对象，一般咱们直接给它赋值成一个对象，再把咱们的action放进去。

import { add, remove, addAsync } from './index.redux'
mapDispatchToProps = { add, remove, addAsync  }

从这里看好像是完成了咱们的任务，可是注意：在咱们的组件能够经过this.props触发相应的action，可是尚未dispatch，因此只返回了一个type，因此上面的代码并非正确的，只是便于你们理解。

咱们还须要dispatch一下action，下面才是正确的代码：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    add: (...args) => dispatch(actions.add(...args)),
    remove: (...args) => dispatch(actions.remove(...args)),
    addAsync: (...args) => dispatch(actions.addAsync(...args))
  }
}

有人会问，我用React-Redux的connect时，这个参数直接穿的是action对象呀，怎么回事？

这是由于在connect内部使用了Redux提供的bindActionCreators方法，在connect内部将全部的action都dispatch了。咱们实现的时候，也须要实现这个bindActionCreators方法。

mergeProps

mergeProps顾名思义，就是将stateProps、dispatchProps、ownProps合并起来。

若是不指定mergeProps，默认用Object.assign

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, {
    num: stateProps.num,
    add: () => dispatchProps.add(),
    remove: () => dispatchProps.remove(),
    addAsync: () => dispatchProps.addAsync(),
  })
}

options

规定connector的行为，一般咱们使用默认值。

connect方法的使用

咱们常见的写法，也就是ES7的decorator装饰器，也就是装饰者模式，这种写法比较简便：

@connect(
  state=>({ num: state}),
  { add, remove, addAsync }
)
class App extends React.Component{
  render(){
    return (
      <div>
        <h2>如今有物品{this.props.num}件</h2>
        <button onClick={this.props.add}>add</button>
        <button onClick={this.props.remove}>remove</button>
        <button onClick={this.props.addAsync}>addAsync</button>
      </div>
    )
  }
}
export default App;

或者是更容易理解的高阶函数的写法：

class App extends React.Component{
  render(){
    return (
      <div>
        <h2>如今有物品{this.props.num}件</h2>
        <button onClick={this.props.add}>add</button>
        <button onClick={this.props.remove}>remove</button>
        <button onClick={this.props.addAsync}>addAsync</button>
      </div>
    )
  }
}
App = connect(
    state => ({num: state),
    { add, remove, addAsync }
)(App)

第二中写法咱们能够更好的理解connect函数如何工做：connect接受了它的四个参数，而后返回了一个高阶组件，高阶组件须要接收一个组件做为参数，在高阶组件中经过处理被传入的组件，其中用到了connect的四个参数，最后将处理后的组件返回出去。

3. mapStateToProps的实现

---

connect方法返回了一个函数，函数里返回了一个组件，有两次返回，这里咱们用两层箭头函数：

export const connect = (mapStateToProps = (state) => state, mapDispatchToProps={}) => (WrapComponent) => {
  return class ConnectComponent extends React.Component{

  }
}

它等价于这种写法：

export function connect (mapStateToProps = (state) => state, mapDispatchToProps={}) {
  return function (WrapComponent) {
    return class ConnectComponent extends React.Component{

    }
  }
}

双层箭头函数更加简洁，也算是编写高阶函数的一个技巧吧。

mapStateToProps的任务已经明确，先接收一个，获取Redux中的store，将stroe经过props传递给组件，代码以下：

import React from 'react'
import PropTypes from 'prop-types'

export const connect = (mapStateToProps = (state) => state, mapDispatchToProps={}) => (WrapComponent) => {
  return class ConnectComponent extends React.Component{
    static contextTypes = {
      store: PropTypes.object
    }
    constructor (props, context) {
      super(props, context)
      this.state = {
        props: {}
      }
    }
    componentDidMount () {
      const {store} = this.context
      this.update()
      store.subscribe(()=>this.update())
    }
    update () {
      const { store } = this.context
      const stateProps = mapStateToProps(store.getState())
      this.setState({
        props: {
          ...this.state.props,
          ...stateProps
        }
      })
    }
    render () {
      return <WrapComponent {...this.props}/>
    }
  }
}

很明确，咱们先用context获取了Provider组件传递过来的store而后将this.props与store中的属性merge成一个新的this.props传递给组件，组件mount的时候用store.subscribe监听了store内数据的变化，从而实时通知组件，完成了connect的第四个任务。

4. mapDispatchToProps的实现

---

介绍mapDispatchToProps的是有也说了，传递进来的action不能直接使用，须要dispatch一下，Redux提供了一个bindActionCreators方法，一样咱们也在本身的Reudx中实现这个方法。

接着上面的代码来写

import React from 'react'
import PropTypes from 'prop-types'
import {bindActionCreators} from './myRedux'

export const connect = (mapStateToProps=state=>state,mapDispatchToProps={})=>(WrapComponent)=>{
    return class ConnectComponent extends React.Component{
        static contextTypes = {
            store:PropTypes.object
        }
        constructor(props, context){
            super(props, context)
            this.state = {
                props:{}
            }
        }
        componentDidMount(){
            const {store} = this.context
            store.subscribe(()=>this.update())
            this.update()
        }
        update(){
            const {store} = this.context
            const stateProps = mapStateToProps(store.getState())
            const dispatchProps = bindActionCreators(mapDispatchToProps, store.dispatch)
            this.setState({
                props:{
                    ...this.state.props,
                    ...stateProps,
                    ...dispatchProps    
                }
            })
        }
        render(){
            return <WrapComponent {...this.state.props}></WrapComponent>
        }
    }
}

这个很简单，主要的就是bindActionCreators方法，写在咱们本身的Redux中

function bindActionCreator(creator, dispatch){
    return (...args) => dispatch(creator(...args))
}
export function bindActionCreators(creators, dispatch){
    return Object.keys(creators).reduce((ret,item)=>{
        ret[item] = bindActionCreator(creators[item],dispatch)
        return ret
    },{})
}

也不是很难理解，遍历对象中的全部action，每一个action都dispatch一下，返回每个dispatch以后的action。

好比以前的add方法为：add(args)，如今的add方法是：store.dispatch(add(args))

---

如今咱们的Provider组件和connect高阶函数已经实现，下一篇咱们实现Redux的中间件。