Unable to understand double arrow function which returns another function

Question

I have been doing a React course and I am unable to understand double arrow functions correctly. Could someone please explain me this piece of code

export const fetchDishes = () => (dispatch) => {
   dispatch(dishesLoading(true));
   setTimeout(() => {
     dispatch(addDishes(DISHES));
   }, 2000);
}

All I understood till now is that fetchDishes is a function which takes no arguments but returns another function named dispatch and the dispatch function calls itself(dispatches an action).

I am looking for a detailed explaination, bonus if you could explain a bit in terms of react too

It's a function that returns a function that takes `dispatch` as an argument, likely as part of a redux-thunk action creator (i.e. async actions). https://redux.js.org/advanced/async-actions — Drew Reese, Aug 18 '20 at 09:09

score 1 · Answer 1 · answered Aug 18 '20 at 09:20

All I understood till now is that fetchDishes is a function which takes no arguments but returns another function

Till this point you are right but later it does not return function named dispatch but instead take argument named dispatch which is an callback (or in Reactjs dispatcher or smth else) and this callback is called with those 2 values at very beginning and after 2 seconds.

    const DISHES = [1, 2, 3];
    const dishesLoading = (someBool) => someBool;
    const addDishes = (dishes) => dishes.length;

    const fetchDishes = () => (dispatch) => {
        dispatch(dishesLoading(true));
        setTimeout(() => {
            dispatch(addDishes(DISHES));
        }, 2000);
    };

    const fetchDishesDispatcher = fetchDishes();

    fetchDishesDispatcher(function someCallbackFunction(value) {
        // first outputed value will be result of "dishesLoading(true)" function
        // after 2 seconds second value will be outputed with result of "addDishes(DISHES)" function
        console.log(value);
    });

score 0 · Answer 2 · answered Aug 18 '20 at 09:36

This is an example of using a middleware in redux such as redux-thunk or redux-saga. It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer, which means it adds a protection layer between action and reducer which can be used to call asynchronous API and check for errors before hand, routing, crash reporting etc.

You can read more about it here and a thread on stackoverflow too.

score 0 · Answer 3 · answered Aug 18 '20 at 09:39

Using classic JS functions, the code could be rewritten like this:

export const fetchDishes = function() {
   return function(dispatch) {
       dispatch(dishesLoading(true));
       setTimeout(() => {
           dispatch(addDishes(DISHES));
       }, 2000);
   }
}

So the function fetchDishes returns function, whose argument is dispatch of type function.

To be honest, I don't understand how this kind of nesting is helpful if the first function doesn't have any arguments (one could just export the function returned by fetchDishes). To see what is the purpose of double arrow functions, read What do multiple arrow functions mean in javascript? .

Unable to understand double arrow function which returns another function

3 Answers3