Question

我正在努力了解mapDispatchToProps

这是一个正在使用的mapDispatchToProps函数

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

那么，这里发生的事情是addItem函数现在可用作反应组件的支柱，对吗？

那么，为什么我们需要使用bindActionCreators并执行此操作

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

究竟发生了什么，特别是在这些行中

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

为什么没有bindActionCreator的前一代码无法工作？

Answer 1

to＆＃34;发送动作＆＃34; （又名：调度）你需要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的结果。

反应mapDispatchToProps bindActionCreator

1 个答案: