Question

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

但是，我发现的教程似乎在调度函数（connect）上调用bindActionCreators，这似乎违反了updatePerson的全部内容。

动作/ update_person.js

bindActionCreators

组件/ WantedCard.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
  };
}

根据我的理解，我到底出错了什么？ UpdatePerson已绑定（？）

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

Answer 1

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

中了解各种选项

bindActionCreators调用了一个调度

1 个答案: