Search code examples
javascriptreactjsredux-thunk

Javascript function syntax with tripple =>

Below is a code snippet which I came across in one of the blog for redux.

enter image description here

This snippet explains redux-thunk. But I am trying to make sense out of the weird syntax

return ({dispatch, getState}) => next => action =>{}

I tried a google search with this syntax but did not get much help. I am not understanding how next and action objects are getting their values. Can someone please help me understand what's going on here?

Solution

  • Chaining of functions in this way is usually to enable a user to bind arguments to a final function in a controlled fashion, rather than having to supply them all in one go.

    In effect it is an API design choice for a piece of functionality.

    ({dispatch, getState}) => next => action => {}

    ...is equivalent to:

    function({dispatch, getState}) { // destructure two properties into arguments
    return function(next) {
        return function(action) {
            // this function has access to `dispatch`, `getState`, `next` & `action`
        }
    }
}

    Note that the "binding" of the arguments to the inner functions occurs through a feature of JavaScript called closures. Full explanation of closures in JavaScript here.