javascript - 在分派(dispatch)上调用bindActionCreators

我的印象是bindActionCreators的目的是将actionCreators包装在一个调度函数中，并给这些新函数起一个名字（可以通过mapDispatchToProps和connect作为道具传递给组件）。

但是，我发现一个教程似乎在调度函数（bindActionCreators）上调用updatePerson，这似乎违反了bindActionCreators的要点。


  动作/update_person.js

import { UPDATE_PERSON } from './types';

export default function updatePerson(person) {
  return dispatch => {
    dispatch(updatePersonAsync(person));
  }
}

function updatePersonAsync(person){
  return {
    type: UPDATE_PERSON,
    payload: person
  };
}

  组件/WantedCard.js

//connects redux actions to props
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    updatePerson: updatePerson,
    deletePerson: deletePerson
  }, dispatch);
}

根据我的理解，我在这里到底出了什么问题？ UpdatePerson已绑定（？）

这是教程库：https://github.com/lorenseanstewart/redux-wanted-list和博客文章https://lorenstewart.me/2016/11/27/a-practical-guide-to-redux/

最佳答案

UpdatePerson已绑定（？）


不，不是您import的正常功能。
为了使其与redux流循环一起播放，您需要dispatch此功能。

当您不传递mapDispatchToProps时，您将获得dispatch函数作为对所连接组件的支持，因此要使用它，您必须像这样进行操作：

this.props.dispatch(updatePerson())

如果您确实决定将mapDispatchToProps传递给connect，那么您将不会收到dispatch作为道具，但可以将其包装起来：

const mapDispatchToProps = dispatch => {
  return {
    updatePerson: () => {
      dispatch(updatePerson())
    }
  }
}

或者，您可以只传递一个对象：

const mapDispatchToProps = {
    updatePerson,
    deletePerson
}

另一种方法是使用bindActionCreators（就像您在帖子中提到的那样）
通过这种方法，您可以使用以下代码行调度操作：

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    updatePerson: updatePerson,
    deletePerson: deletePerson
  }, dispatch);
}

并这样称呼它：

this.props.updatePerson()

请注意，如果键与变量匹配，则可以使用Shorthand property names of ES2015

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    updatePerson,
    deletePerson
  }, dispatch);
}

bindActionCreators的另一种不错的方法是将所有操作作为别名导入（甚至来自不同文件的不同操作）：

import * as userActions from '../url';
import * as otherActions from '../otherUrl';

然后将它们全部堆叠在一个对象中（或根据需要将它们分开）：

function mapDispatchToProps(dispatch) {
    const combinedActions = { ...userActions, ...otherActions };
    return {
        actions: bindActionCreators(combinedActions, dispatch)
    };
}

现在，您可以通过actions对象引用任何操作：

this.props.actions.myAction();
this.props.actions.myOtherAction();

您可以阅读有关docs中各种选项的信息

关于javascript - 在分派(dispatch)上调用bindActionCreators，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47225615/