-1
const mapDispatchToProps = dispatch => {
 return {
  buyCake: () => dispatch(buyCake())
 }
}

When I run my program by changing the third line to

buyCake: dispatch(buyCake())

it doesn't work. What is the difference between these two approaches and why do you need the () =>

skethoskope
  • 41
  • 5
  • 1
    The second version calls `dispatch(buyCake())` immediately, the first is a function that *will* call it. – Dave Newton Jun 21 '21 at 21:22
  • Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) – HoldOffHunger Jun 21 '21 at 22:57

1 Answers1

0
buyCake: () => dispatch(buyCake())

This will declare buyCake to be a function that takes no arguments, and calls dispatch in its body; but buyCake itself won't be called until you explicitly call it.

It's more or less conceptually equivalent to:

function buyCake() {
    dispatch(buyCake());
}

I say conceptually because there are some technical differences between regular functions and arrow functions (a.k.a. lambdas, lambda expressions); see this for more info.

On the other hand

buyCake: dispatch(buyCake())

will set buyCake to the result of the call to dispatch (dispatch will be called immediately, right there).

It's the same as the difference between:

const getSinPI = () => Math.sin(Math.PI);   // a function named `getSinPI`
getSinPI();                                 // returns approx. 0

and

const sinPI = Math.sin(Math.PI);   // a variable storing the result (approx. 0)

The mapDispatchToProps function returns an object containing, as properties, ad-hoc wrapper functions that you defined, that perform calls to dispatch in some way that makes sense for your application. This object is then used to place these functions on the props object (the different dispatch calls are "mapped" onto these wrappers - thus the name). This is so that you can make use of dispatch in a more convenient way, using wrapper functions with names that more closely reflect what your application is doing.

Filip Milovanović
  • 602
  • 3
  • 8