Difference between onClick={() => store.dispatch(action)} and onClick={store.dispatch(action)}

why do we need a function to wrap store.dispatch(action) like this?

onClick={ () => store.dispatch(action) } 

why not use this, let onClick equals dispatch() function ? what is the difference?

onClick={ store.dispatch(action) }

The second would immediately execute the function, and assign the return value to the onClick handler.

The first, on the other hand, actually assigns the store.dispatch() to the onClick as you would expect (in essence, I think, it immediately executes the anonymous function in which the store.dispatch() is the return value, thus returning that as the action to the onClick).

At a guess, anyway. :wink:

1 Like

@snowmonkey is right for the most part.

The first one isn’t immediately invoked. It is just a function that gets assigned to the onClick handler.
If you wrapped it in parens and then added a second set (() => store.dispatch(action))() then it would be what you are thinking.

1 Like

Thanks. Get clear now.

Thanks. I’m understand it now.

The first one asign the function to onClick, when click happen, the function will execute, dispatch will execute.

The second one return the dispatch executed result to onClick. Which means before user click, the dispatch already executed.