Question

我正在尝试阅读这个应用程序的代码，我很困惑你如何从这行代码中的道具派遣：

 _handleSubmit(e) {
    e.preventDefault();

    const { email, password } = this.refs;
    const { dispatch } = this.props;

    dispatch(Actions.signIn(email.value, password.value));
  }

https://github.com/bigardone/phoenix-trello/blob/master/web/static/js/views/sessions/new.js#L17

希望有人能解释调用this.props如何返回调度？

Answer 1

const { dispatch } = this.props;只是将this.props.dispatch解构为dispatch变量，因此它会从道具中使用，它们来自道具？来自react-redux connect：

export default connect(mapStateToProps)(SessionsNew);

connect只是高阶组件，它基本上将您的组件与商店连接起来。作为此过程的一部分，它将调度分配到组件props

中

编辑：

主要思想是connect是一个函数，它接受任何组件并使用dispatch属性扩展它的道具（它返回包装组件的另一个反应组件）。您还可以使用mapDispatchToProps和mapStateToProps将某些属性从州映射到组件并使用dispatch绑定操作

Answer 2

react-redux是一个库，可帮助组件以可预测和高效的方式从Redux存储中获取值。它提供的主要工具是一个名为connect的函数，它包含Redux组件，为它们提供商店值作为道具。您链接到的代码的关键部分位于底部：https://github.com/bigardone/phoenix-trello/blob/master/web/static/js/views/sessions/new.js#L70-L74。

假设您在名为counter的Redux商店中有一个值。您希望组件CounterDisplay知道此值，并在更改时更新：

class CounterDisplay extends Component {
  render () {
    const { counter, dispatch } = this.props
    return (
      <div>{counter}</div>
    )
  }
}

这些变量将是未定义的，除非你明确地将这些值置于道具中“老式的方式”：

<CounterDisplay counter={1} dispatch={() => {}} />

这就是connect的用武之地。它知道Redux商店（通常使用另一个名为Provider的组件）并且可以将值放入它包装的组件的道具中。它返回所谓的高阶组件（HOC）：一个包装另一个组件以执行特定功能，在这种情况下连接到商店。

以下是我们如何将counter值转换为道具：

function mapStateToProps (state) {
  // Slightly confusingly, here `state` means the entire application
  // state being tracked by Redux... *not* CounterDisplay's state
  return {
    counter: state.counter
  }
}

export default connect(mapStateToProps)(CounterDisplay)

因此，我们不是导出CounterDisplay本身，而是导出HOC。除了counter之外，connect还会自动将dispatch函数插入到道具中，以便我们可以在组件中使用它。这就是您在审核的来源中看到的行为。

Answer 3

只是解构分配的一个例子。点击此处了解更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

这个派遣功能如何来自道具？

3 个答案: