來自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文檔示例的問題

回答

相關問題