反应mapDispatchToProps bindActionCreator

Question

我很难理解mapDispatchToProps

这里使用的是一个mapDispatchToProps函数

const mapDispatchToProps = () => {
  return {
    addItem: addItem
  };
};

所以，这里到底发生了什么，addItem函数现在可以作为react组件的支柱，对吗？

那么，为什么我们需要使用bindActionCreators并这样做呢？

const mapDispatchToProps = (dispatch) => {
  /* code change */
  return bindActionCreators({
    addItem: addItem
  }, dispatch);
};

到底发生了什么，特别是在这几行

return bindActionCreators({
        addItem: addItem
      }, dispatch);

如果没有bindActionCreator，为什么前面的代码不能工作呢？

Answer 1

要“发送一个操作”(又名:分派)，您需要dispatch(actionCreator())

假设addItem是function addItem() { return {type: 'addItem', payload: data}; };

addItem是一个返回动作的函数。它是一个actionCreator (因此:绑定actionCreator)，但不分派它。您仍然必须对生成的操作进行dispatch。

mapDispatchToProps为您提供了dispatch函数，然后您需要该函数来分派该操作。

以下是几个可行的例子：

const mapDispatchToProps = (dispatch) => {
    return {
        addItem: () => dispatch( addItem() ),
        addItemInline: () => dispatch( {type: 'addItem', payload: 'data'} )
    }
};

从本质上说，bindActionCreators所做的不过是：

const bindActionCreators = (actionCreators, dispatch) => {
    let boundActionCreators = {};
    return Object.keys(actionCreators).forEach(key => {
        boundActionCreators[key] = () => {
            dispatch( actionCreators[key]() );
        };
    });
    return boundActionCreators;
};

或者，更详细:对于传递给它的对象中的每个actionCreator，它返回一个新函数，该函数分发actionCreator的结果。