javascript - react mapDispatchToProps bindActionCreator

Question

我很难理解 mapDispatchToProps

这里使用了一个 mapDispatchToProps 函数

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

那么，这里真正发生的是 addItem 函数现在可以作为 React 组件的一个 prop，对吧？

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

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

到底发生了什么，尤其是在这些行中

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

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

Answer 1

要“发送 Action ”(又名:调度)，您需要dispatch(actionCreator())

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

addItem 是一个返回 Action 的函数。它是一个 actionCreator(因此:绑定(bind) actionCreator)，但不分派(dispatch)它。您仍然需要调度结果操作。

mapDispatchToProps 为您提供了 dispatch 函数，您需要用它来分派(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，它都会返回一个新函数来分派(dispatch) actionCreator 的结果。