Question

我正在学习Redux。在文档中，任务应用程序以模块AddToDo.js为例。以下是我的问题后面的代码。

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

我不完全理解这一行中的语法let AddTodo = ({ dispatch }) => {更具体地说({dispatch})。我想这可能与新的ES6对象解构有关。这是否意味着如果一个对象作为参数给出，你解构属性调度并可以直接引用它？
在行AddTodo = connect()(AddTodo)中创建一个容器组件，其中包含一个表示组件子组件。但是，connect函数没有给出任何参数。默认情况下，此容器是否为表示组件子项提供某种调度函数作为prop？

Answer 1

回答你的第一个问题：

我想这可能与新的ES6对象解构有关。

这是正确的，因为@Xufox指出这种表达被称为destructuring而不是deconstruction的小捕获。

在函数参数中使用解构表达式时，您可以将其视为一个缩略图：

const AddTodo = (props) => {
  const dispatch = props.dispatch;
  ...
}

事实上，如果您使用Babel online Repl，则可以看到以下表达式const AddTodo = ({ dispatch }) => { }; Babel生成以下代码：

var AddTodo = function AddTodo(_ref) {
  var dispatch = _ref.dispatch;
};

关于你的第二个问题。基于react-redux documentation。当您不为connect函数提供参数时，连接的组件（在本例中为AddTodo）将不会监听状态更改和dispatch函数将通过组件道具注入或提供。此dispatch函数是Store's dispatch function。

Answer 2

在部分答案中回答第一个问题：

let AddTodo = ({ dispatch }) => {};使用参数解构。 AddTodo是一个接收对象作为参数的函数。然后它会表现得像这样：

AddTodo()会抛出TypeError: can't convert undefined to object，因为未提供要构造的对象。
在AddTodo({})中，您可以使用dispatch作为变量，但其值为undefined（与({}).dispatch一样）。
在AddTodo({ dispatch: "some value" })中，您可以使用dispatch作为变量，其值为"some value"（与({ dispatch: "some value" }).dispatch一样）。

问题遵循Redux文档中的示例

2 个答案: