Question

在Dan Abramov's answers之一中，有代码

// action creator
function loadData(dispatch, userId) { // needs to dispatch, so it is first argument
  return fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // don't forget to pass dispatch
}

似乎mapDispatchToProps只是将通用调度映射为props（如this.props.dispatch），因此该组件可以调度任何动作吗？

首先，它是一种好形式还是仅仅是一个示例，但我们应该对其进行特定的调度，例如this.props.dataReceived？

第二，因此对于上面的代码来说，mapDispatchToProps的写法是：

const mapDispatchToProps = dispatchOfReduxStore => {
  return {
    dispatch: dispatchOfReduxStore
  }
}

甚至只是：

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  }
}

，简化为：

const mapDispatchToProps = dispatch => ({ dispatch })

和this.props.dispatch成为多才多艺的调度员？

我还发现，当我们在mapDispatchToProps中省略connect()时，this.props.dispatch将自动可用。

Answer 1

我认为使用dispatch将mapDispatchToProps绑定到您的操作的主要原因是要隐藏所连接组件中的redux。

在没有绑定dispatch的情况下，您的组件必须知道您的操作是什么，并记住它们不执行任何操作而不将其作为dispatch的参数来调用。

通过绑定，您的组件只知道它在props中具有这些功能，可以在需要时直接调用。

另一个好处是可以使代码更简洁，因为您可以调用this.props.myAction()而不是this.props.dispatch(myAction())。

我不认为这是硬是非。我认为其中有些是偏爱。我更喜欢将我的组件写到他们只知道提供给他们的道具的地方。但是您可能更希望明确表明您的组件正在使用redux来分派操作。

在React / Redux中，是否可以将通用派发作为道具来派发所有动作呢？

1 个答案: