Chained Arrow Function in Redux Syntax

Question

Hi I'm just working into Redux and currently I'm just confused about a redux syntax given in a Redux-Cheat-Sheet Redux Cheat Sheet from Egghead:

const actionLogger = ({dispatch, getState}) =>
 (next) => (action) =>
 { console.log(action); return next(action) }

So my question is: What does this "chained" arrow functions behave like?

Answer 1

You can write it down as:

const actionLogger = function({dispatch, getState} /* this is store object */) {
  return function(next) {
    return function(action) {
      console.log(action);
      return next(action);
    };
  };
};

So basically chained arrow functions represent nested functions. It could be a bit confusing.

Detailed explanation how redux middleware works