Redux源码详细分析三 ———— bindActionCreators

2018-11-11

bindActionCreators这个Api在平时的开发中应用不是很多，它主要是用于在没有引入store的子组件中，可以让子组件不直接应用dispatch来派发action，更改state。但实际开发中更多会应用react-redux这个库，而react-redux已经对其进行了封装。

bindActionCreators

先来看一下其源码：

//这是bindActionCreators调用的公共方法，其内部就是dispatch一个action
function bindActionCreator(actionCreator, dispatch) {
    return function() {
        return dispatch(actionCreator.apply(this, arguments))
    }
}

//bindActionCreators接收两个参数，类型为function或object的actionCreators和store的dispatch方法
export default function bindActionCreators(actionCreators, dispatch) {

    //如果actionCreators传入的值函数，则直接dispatch，因为只有一个actionCreator
    if (typeof actionCreators === 'function') {
        return bindActionCreator(actionCreators, dispatch)
    }

    //对actionCreators进行类型判断，不是object或者为null时，会报错
    if (typeof actionCreators !== 'object' || actionCreators === null) {
        throw new Error(
        `bindActionCreators expected an object or a function, instead received ${
            actionCreators === null ? 'null' : typeof actionCreators
        }. ` +
            `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
        )
    }

    /*
        此时的actionCreators是一个object，对其进行遍历，并将每一项放入自定义的boundActionCreators中，
        相当于深拷贝一份，然后再对每一项执行bindActionCreator方法，也就是对每一项派发action
    */
    const keys = Object.keys(actionCreators)
    const boundActionCreators = {}
    for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        const actionCreator = actionCreators[key]
        if (typeof actionCreator === 'function') {
            boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
        }
    }
    return boundActionCreators
}

bindActionCreators的逻辑很简单，就是先遍历，然后分别执行

bindActionCreators实际例子：

//store.js

const initialState = { num: 1 }

export const increment = () => ({ type: 'INCREMENT' })
export const decrement = () => ({ type: 'DECREMENT' })

const numReducer = (state=initialState, action) => {
    switch(action.type){
        case 'INCREMENT':
            return { ...state, num: state.num+1 }
        case 'DECREMENT':
            return { ...state, num: state.num-1 }
        default:
            return state
    }
}

export numStore = createStore(numReducer)

//App.js

class App extends React.Component {
    constructor(props){
        super(props)
        this.state = numStore.getState()
        numStore.subscribe(this.handleChange)
    }

    handleChange = () => {
        this.setState(numStore.getState())
    }

    render(){
        const { num } = this.state

        /*
            将increment、decrement两个actionCreator和numStore.dispatch方法传入到bindActionCreators中，
            就相当于遍历{ increment, decrement }这个对象，得到两个函数，最后以这个对象的key作为key，
            以函数作为value的object形式返回，所以actionCreators为：
            actionCreators = {
                increment: () => numStore.dispatch(increment()),
                decrement: () => numStore.dispatch(decrement())
            }
            传入Title子组件，而子组件按钮分别绑定这两个事件，当点击时会派发对应的action，num也得到对应的更新
        */
        const actionCreators = numStore.bindActionCreators({ increment, decrement }, numStore.dispatch)
        return (
            <div>
                <div>{ num }</div>
                <Title { ...actionCreators }/>
            </div>
        )
    }
}

//title.js

class Title extends React.Component {
    render(){
        const { increment, decrement } = this.props
        return (
            <div>
                <button onClick={ increment }>increment</button>
                <button onClick={ decrement }>decrement</button>
            </div>
        )
    }
}

bindActionCreators这个Api没有什么难点，就是组合在遍历执行，平时应用较少，因为组件嵌套多了，会不方便管理，如果只是在当前组件，则没必要使用，直接dispatch(action)会更方便。