CODEWITHSUNDEEP
ecmascript-6react-redux
Ben Carp
Ben Carp

Reputation: 26608

Questions following an example from the Redux Documentation

I’m learning Redux. In the documentation 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. I don’t completely understand this syntax in this line let AddTodo = ({ dispatch }) => { More specifically ({dispatch}). 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 presentational 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?

Upvotes: 0

Views: 45

Answers (2)

pablogq
pablogq

Reputation: 456

  1. To answer your first question:

I guess it might be related to the new ES6 object deconstruction.

That is correct, with the small catch that this kind of expression is called destructuring and not deconstruction as @Xufox pointed out.

When the destructuring expression is used in a function argument, you can see it as a shorcut for:

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

In fact, if you use Babel online Repl, you can see that for the following expression const AddTodo = ({ dispatch }) => { }; Babel produces the following code:

var AddTodo = function AddTodo(_ref) {
  var dispatch = _ref.dispatch;
};
  1. Regarding your second question. Based on react-redux documentation. When you don't provide arguments to the connect function, the connected component (in this case AddTodo) won't listen to state changes and the dispatch function will be injected or provided via the component props. This dispatch function is the Store's dispatch function.

Upvotes: 2

Sebastian Simon
Sebastian Simon

Reputation: 19545

Answering the first question in a partial answer:

let AddTodo = ({ dispatch }) => {}; uses parameter destructuring. AddTodo is a function that receives an object as an argument. Then it will behave like this:

  • AddTodo() throws a TypeError: can't convert undefined to object, because the object to destructure is not provided.
  • In AddTodo({}) you can use dispatch as a variable, but its value will be undefined (just as with ({}).dispatch).
  • In AddTodo({ dispatch: "some value" }) you can use dispatch as a variable, and its value will be "some value" (just as with ({ dispatch: "some value" }).dispatch).

Upvotes: 1

Related Questions