【JavaScript】アロー関数にアロー関数？

Question

いつも大変お世話になっております。
ネットのReactのコードを見ていて解釈の仕方がわからないコードがありました。

ReduxのActionのコードのようですが以下の通りです。

export const listProducts = () => async (dispatch) => {
  try {

    dispatch({ type: PRODUCT_LIST_REQUEST })

    const { data } = await axios.get('/api/products')

    dispatch({
      type: PRODUCT_LIST_SUCCESS,
      payload: data,
    })

  } catch (err) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload: err.response && err.response.data.message
        ? err.response.data.message
        : err.message,
    })
  }
}

アロー関数が連続して= () => async (dispatch) =>とありますが、
こちらはどのような働きをしているのでしょうか？

どなたか詳しい方がいらっしゃいましたらご教授いただけますと幸いです。
それではどうぞ宜しくお願い致します。

Answer 1

listProducts は関数を返す関数です。アローを使わないで同等のコード書くとすると、例えば以下のように function を使って関数宣言および関数式を書いたものになります。

function listProducts() {

  const apiGetProducts = async function (dispatch) {
    try {
     ･･･
    } catch (e) {
     ･･･
    }
  }

  return apiGetProducts;

}

補足: listProductsのように関数を返す関数（または関数を引数にとる関数）のことを 高階関数 といいます。

Answer 2

() => 式 は () => { return 式; } なので、listProducts は async (dispatch) => { ...} というアロー関数を返すアロー関数です。

Answer 3

ポインタのポインタである。