I’m learning Redux, and going over the Redux documentation. In the tutorial a task app is presented as an example with a module AddToDo.js. Here is the code followed by my questions.
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
- look at the inputs of the AddToDo function
({dispatch})
. I don’t completely understand this syntax. I guess it might be related to the new ES6 object deconstruction. Does it mean that if an object is given as an argument, you deconstruct the propertydispatch
and can refer to it directly? - In the line
AddTodo = connect()(AddTodo)
a container component is created, with one prepositional component child. However, the connect function is not given any arguments. does this container by default provide the presentational component child with some sort of dispatch function as a prop?