Zhao Yi Zhao Yi - 1 month ago 6
Javascript Question

How to understand this kind of syntax in Javascript Redux Middleware

I am reading the article to understand the redux middleware from this link: http://redux.js.org/docs/advanced/Middleware.html

Below code is an example of a logging middleware.

const logger = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}


What I don't understand it below part:

const logger = store => next => action =>


What does kind of this syntax mean? Are store, next, action parameters for the logger function? What is the different when comparing below code:

const logger = (store, next, action) => {}

Answer

It's a form of currying. A very concise form of currying. If we changed the syntax from arrow functions to classic functions, it would go from this (admittedly confusing) syntax:

const logger = store => next => action => { ... }

... to this hopefully less confusing syntax:

const logger = function (store) {
    return function (next) {
        return function (action) {
            // ...
        }
    }
}

Does this help clarify it a bit?

Comments