# Redux Tutorial - Question for experienced developers

**URL:** <https://forum.freecodecamp.org/t/redux-tutorial-question-for-experienced-developers/153549>\
**Category:** General\
**Created:** [October 17, 2017, 3:26am UTC](https://forum.freecodecamp.org/t/redux-tutorial-question-for-experienced-developers/153549 "2017-10-17T03:26:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![carpben](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/carpben/32/31512_2.png) [@carpben](https://forum.freecodecamp.org/u/carpben)\
**Post date:** [October 17, 2017, 3:26am UTC](https://forum.freecodecamp.org/t/redux-tutorial-question-for-experienced-developers/153549/1 "2017-10-17T03:26:03Z")

</div>

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.

```auto
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?

---

<div class="post-metadata">

**Author:** ![Marmiz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marmiz/32/74845_2.png) [@Marmiz](https://forum.freecodecamp.org/u/Marmiz)\
**Post date:** [October 17, 2017, 3:58am UTC](https://forum.freecodecamp.org/t/redux-tutorial-question-for-experienced-developers/153549/2 "2017-10-17T03:58:56Z")

</div>

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:

```auto
// 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment):

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

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

```

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

```auto
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()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options).

Connect is a [Higher Order Component](https://reactjs.org/docs/higher-order-components.html), 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

```auto
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:

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

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

export default EnhancedAddTodo // export the enhanced version

```

Hope it helps 😄

* * *

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 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:37pm UTC](https://forum.freecodecamp.org/t/redux-tutorial-question-for-experienced-developers/153549/3 "2021-01-17T20:37:18Z")

</div>