What does an arrow function to another arrow function mean in Javascript?

Question

In the following function, where does dispatch come from and what is the flow of control?

export const getContacts = () => async (dispatch) => {
  const res = await axios.get("http://jsonplaceholder.typicode.com/users");
  dispatch({
    type: GET_CONTACTS,
    payload: res.data,
  });
};

I understand basic arrow functions, but what actually happens when I call getContacts(). Since I am not passing in anything, where does dispatch come from? Does this come from thunk? I did not import thunk into this file which is why I am confused. This is the whole file:

import { GET_CONTACTS, ADD_CONTACT, DELETE_CONTACT } from "./types";
import axios from "axios";

// the following returns the objects that we want to push to the dispatch in contactRedcuer
export const getContacts = () => async (dispatch) => {
  const res = await axios.get("http://jsonplaceholder.typicode.com/users");
  dispatch({
    type: GET_CONTACTS,
    payload: res.data,
  });
};

score 1 · Accepted Answer · answered Jun 03 '20 at 15:08

What does an arrow function to another arrow function mean in Javascript?

That the first arrow function has the second one as a return value.

If you don't pass arguments to the first one (as in this case) to form a closure, it isn't usually a useful thing to do.

I understand basic arrow functions, but what actually happens when I call getContacts(). Since I am not passing in anything, where does dispatch come from?

dispatch comes when the returned function is called, which doesn't happen in the code you've shared.

const first = (argument_to_first) => 
    (argument_to_second) => console.log({
      argument_to_first,
      argument_to_second
    });

const second = first("Hello");

second("Goodbye");

What does an arrow function to another arrow function mean in Javascript?

1 Answers1