来自Redux文档示例的问题

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

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)中创建了一个容器组件，其中包含一个表示组件的子组件。但是，连接函数没有给出任何参数。默认情况下，此容器是否为演示组件子提供某种调度功能作为道具？

来源

2017-10-17 Ben

它被称为解构，而不是解构。 – Xufox

要回答你的第一个问题：

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

这是正确的，与小抓，这种表达的被称为destructuring，而不是作为deconstruction @Xufox指出。

当解构表达在一个函数的参数使用时，可以把它看作是一个shorcut：

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

事实上，如果使用Babel online Repl，你可以看到，对于下面的表达式const AddTodo = ({ dispatch }) => { };巴别产生以下代码：

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

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

来源

2017-10-17 09:00:00 pablogq

回答第一个问题的部分答案：

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一样）。

来源

2017-10-17 03:56:27 Xufox

来自Redux文档示例的问题

回答

相关问题