-2

I was reading this article about creating react/redux applications and was a bit confused by the following section, specifically the part I've circled in red. What exactly is happening here? I'm not very familiar with the syntax being used, the double "=>" is not something I've seen before. If you are able to explain this block of code that would be much appreciated!

Thanks

enter image description here

intA
  • 2,513
  • 12
  • 41
  • 66
  • 3
    Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) – Andy Ray Dec 17 '18 at 01:55
  • 1
    [Please don't post your code as an image](//meta.stackoverflow.com/q/285551). It's hard to read, prevents text-based searching, and lowers the overall presentation value of the post. – Blue Dec 17 '18 at 02:12

3 Answers3

2

Not sure how much you understand Redux yet but you create actions for each task you want to record in the store, these are processed using reducers.

The createAction function, as it's name suggests creates actions, so rather than having to re-write the same code over and over you can call it, passing the name of the action you want to create. In this example the action being created is called SET_USER_ID

The arrow function => is new syntax introduced with the latest javascript which is known as ES6. You can read about it here. Arrow functions allow you to define functions using shorter syntax and they also solve scoping issues.

The final line would be used within your react component to call the action. i.e.

<Button onClick={ () => dispatch(setUserId('abcd123')) } />

It took me a while to get my head around redux, if you haven't watched Dan Abramov's tutorials on it then I highly recommend them. He's the creator of redux. Also start building your own redux app, that's the best way to learn.

Pixelomo
  • 6,373
  • 4
  • 47
  • 57
2

"the double "=>" is not something I've seen before."

This is called currying is the technique of translating the evaluation of a function that takes multiple arguments, in this particular example type, (payload, meta). Here, the function accepts the first argument (type) and returns a function that accepts the second arguments (payload, meta) and so on.

example: const sum = x => y => x + y;

sum (2)(1); // returns 3

sum (2); // returns a function y => 2 + y

Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument - a fancy name of Partial Application

https://en.wikipedia.org/wiki/Partial_application

ObjectMatrix
  • 325
  • 1
  • 3
  • 9
0

First you call createAction and pass a type(SET_USER_ID) then you call setUserId and pass a payload (id in this case). 'Meta' is optional argument. It is hard to wrap your head around it at first. You can also write it this way

const newOPfunction = (type) => {
const newFunc = (id) => {
   return {type, id}
}
return newFunc;
}

but it doesn't look as pretty

Aleks
  • 894
  • 10
  • 14