来自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)
中创建了一个容器组件,其中包含一个表示组件的子组件。但是,连接函数没有给出任何参数。默认情况下,此容器是否为演示组件子提供某种调度功能作为道具?
答
- 要回答你的第一个问题:
我想这可能与新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。
答
回答第一个问题的部分答案:
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
一样)。
它被称为解构,而不是解构。 – Xufox