Home / Questions / 40650
Accepted
Andrés Muñoz
Asked: 2020-12-23 14:46:35 +0800 CST 2020-12-23 14:46:35 +0800 CST

What does this mean in javascript (store) => (next) => (action) => { } ?

  • 772

In some redux tutorials I came across the following way to declare a function that will act as middleware, the question is what is happening in this part of the function: (store) => (next) => (action) =>

const logger = (store) => (next) => (action) => {
    // logger body...
    next(action)
}

I mean take input store and then what happens?

javascript

2 Answers

  1. Best Answer

    The function you show is the ES6 way of writing the following function:

    var logger = function logger(store) {
    return function (next) {
        return function (action) {
            // logger body...
            next(action);
        };
    };
};

    This is the basic structure of a middleware for redux, which you will then pass as a parameter in applyMiddleware(logger), where internally it expects to receive that structure of 3 nested functions.
    Why there are three functions, the vast majority of the time you should not worry and simply write your code inside the last nested function, but if you are still in doubt, what it does in each case would be something like this:

    var logger = function logger(store) {
    // De aquí podrías acceder a store.dispatch() y store.getState()
    return function (next) {
        // Esto se ejecuta en createStore()
        return function (action) {
            // Esto se ejecutaría en cada dispatch() invocado, que en este caso
            // sería la función que nombraste como next()
        };
    };
};

    Here are some examples where you need to define code for more than one of these functions.

    • 2

  2. arguments

    Middlewares( Arguments ): Functions that comply with that Redux APIof middleware . Each middleware receives Store's dispatchand getStatefunctions as named arguments, and returns a function. That function will be given the nextmiddleware dispatch method, and is expected to return an action function called next(action)with a potentially different argument, or at a different time, or perhaps not call it at all. The last middleware in the chain will receive from the actual store dispatchmethod that nextparameter, thus ending the chain. Thus, the signature is the middleware ({ getState, dispatch }) => next => action.

    Returns _

    (Function) enhancer A store that applies the given middleware. The signature store enhancer is createStore => createStorebut the easiest way to implement it is to pass it to createStore()as the last enhancerargument.

    Example see here

    • 1