1

Ran into some code that looks like the following:

return store => next => action => {
    switch(action.type) {
    ...
    default:
      return next(action)
};

The entire sample is here: https://exec64.co.uk/blog/websockets_with_redux/

What is the triple arrow syntax here? I'm familiar with arrow functions, but I've never seen more than one used before to define a function.

randombits
  • 47,058
  • 76
  • 251
  • 433

1 Answers1

7

It is an arrow function with argument store which returns another arrow function with argument next which returns another one with argument action. Analogy with regular functions would be:

return function (store) {
  return function(next) {
    return function(action) {
      switch(action.type) {
      ...
      default:
        return next(action)
    }
  }
}

Just to notice that this syntax:

const myFunction = someParam => someValue

is shorthand for:

const myFunction = someParam => {
  return someValue
}
madox2
  • 49,493
  • 17
  • 99
  • 99
  • 2
    Thanks. Dear lord I hope this isn't common practice in ES6 apps. – randombits Nov 10 '17 at 22:51
  • A advantage being you don't need to immediately supply every argument immediately. You can supply the first one or two args, then give the third later. You'd have to use a closure or something else to achieve this otherwise. – Carcigenicate Nov 10 '17 at 22:52
  • 1
    @randombits it's common practice in functional programming languages which are an inspiration to the development of other languages. You can expect people from functional programming backgrounds to be more comfortable writing code like that. – apokryfos Nov 10 '17 at 22:57
  • Especially considering that a simple `return function (store, next, action) {...` is **not** longer, is much clearer, and more efficient, this is horrible. – user949300 Nov 10 '17 at 22:58
  • @randombits it might be very useful in some situations, if you want to learn more look for `first-class functions` or `currying` – madox2 Nov 10 '17 at 23:00
  • IMO, and other smarter people (Eric Elliot), functional programmers forcing currying and monads in places where simpler alternatives exist don't help their cause. And in this example **there is no currying going on**, since store, next and action are not functions. Check the linked source code. This is just bad coding. Added: next() might be a function, but it gets ignored. Even more confusing. – user949300 Nov 10 '17 at 23:10
  • 1
    The usefulness of currying depends on the conventions and cases where something might be called, not on the types of the values being passed as arguments. In some cases and with some libraries, using this syntax is much simpler. – loganfsmyth Nov 10 '17 at 23:16
  • @loganfsmyth While I use basic `map(), filter()`, etc. a lot, I don't do a ton of the fancier functional programming. Could you please provide an example (or link to one) where this syntax is simpler? – user949300 Nov 11 '17 at 00:07
  • I don't really think the comment section is a good place to hash this out, but the example code given in this question is a good one. This page spells out the whole reasoning behind it https://redux.js.org/docs/advanced/Middleware.html#the-final-approach – loganfsmyth Nov 11 '17 at 00:17