Redux Tutorial - Question for experienced developers

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
  1. 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 property dispatch and can refer to it directly?
  2. 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?

1: Since React 14 ( I believe ) you can create Component as Stateless Function: just plain function that renders some markup.

As the name suggest, since this are just regular old style function, they cannot hold state like classes do (hence the name)

In short this three methods are all valid way to create a React component:

// ES6 class

class Greetings export React.Component {
constructor(props) {
 [...]
}

render(){
  return(
    [... some markup ...]
  )
}
}

/* or as a stateless function */

// regular function
function Greeting(props) {
  return(
    [... some markup ...]
  )
}

//ES6 arrow function -- the one you have in your example
const Greeting = (props) => (
  [... some markup ...]
)

Then you have destructuring objects:

The difference in destructuring is how you then access property inside the component:

const Greetings = (props) => /*  props.name */
const Greetings = ({ name }) => /* name */

As you can see by destructuring you can save some typing:

props.name VS name

To wrap up your AddTodo is a Stateless Function that takes dispatch as a variable prop.

This leads us to question 2:
where exactly does dispatch comes from?

It’s all in connect().

Connect is a Higher Order Component, a component that returns a component, but enhance it of some extra functionality.

In this case your connect is enhancing your AddTodo by exposing the Store methods, and that’s why you are able to use dispatch.

So in shortness what

AddTodo = connect()(AddTodo)

does is passing your original AddTodo component to this connect function as arguments, connect will return this component, but enhanced with extra functionality.


Note: If it clarify it for you, you could have wrote the same statement as:

const AddTodo = (props) => /* ... */ // my component

const EnhancedAddTodo = connect( [other args] )(AddTodo) // enhance it

export default EnhancedAddTodo // export the enhanced version

Hope it helps :smile:


Personal note: you don’t need Redux in order to use React: focus on understanding React well first;
then you can work your way with other libraries :slight_smile: