我對 react js 中的回調 function 感到困惑

Question

我跟着react js教程，代碼是這樣寫的

import React, { Fragment, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { ArticleListSection } from "../../components";
import { ArticlesCard, Hero } from "../../components/molecules";
import { setDataBlog } from "../../config/redux/action";

export const Home = () => {
  const { dataBlog } = useSelector((state) => state.homeReducer);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setDataBlog());
  }, [dispatch]);
  return (
    <Fragment>
      <Hero
        titleHero="Kemal is a place to write, read, and connect."
        descHero="It's easy and free to post your thinking on any topic and connect
      with millions of readers."
        button="Start Writing!"
      ></Hero>
      <ArticlesCard dataBlog={dataBlog}></ArticlesCard>;
      <ArticleListSection dataBlog={dataBlog}></ArticleListSection>
    </Fragment>
  );
};
export default Home;

另一部分是這樣調用的（homeAction.js）

import Axios from "axios";

export const setDataBlog = () => (dispatch) => {
  console.log({ dispatch });
  Axios.get("http://localhost:4000/v1/blog/posts")
    .then((result) => {
      const responseAPI = result.data;
      dispatch();
    })
    .catch((err) => {
      console.log("error: ", err);
    });
};

我的理解是，dispatch 是 useDispatch 的 function，它以 function setDataBlog() 的形式作為參數傳遞。

所以如果我解構 homeAction 將是這樣的

export const setDataBlog = () =>{
  return(dispatch)=>{
    Axios.get("http://localhost:4000/v1/blog/posts")
      .then((result) => {
        const responseAPI = result.data;
        dispatch({ type: "UPDATE_DATA_BLOG", payload: responseAPI.data });
      })
      .catch((err) => {
        console.log("error: ", err);
      });
  }
}

但我很困惑，

• 派送返回的是什么
• 我知道 homeAction.js 文件中的 2 箭頭 function 是一個 function 返回另一個 function 但為什么這樣寫。
• 在setDataBlog function中還有一個“dispatch”參數，這個參數是從哪里來的？？！！
• 為什么在 setDataBlog function 中他再次調用 dispatch function？？？ 調用setDataBlog的不是dispatch function，怎么調用child function里面的parent function？！！！

無論如何，如果你回答這個問題，謝謝你。

Answer 1

我已經解決了這個問題。

所以基本上，調度是這樣工作的 .

要理解這個問題，我們需要更接近材料

1. 箭頭函數
2. 咖喱 function
3. 回調

我會回答我的問題

1. 我知道 homeAction.js 文件中的 2 箭頭 function 是一個 function 返回另一個 function 但為什么這樣寫。

要理解這一點，也許我們應該從這樣一個簡單的語法開始：

middleWare = callBack => {
  callBack("Ini pesan dari middleware");
}

fungsi2 = pesan=>{
    document.write(pesan)
}

const container = () => {
  middleWare(fungsi2)
}

container()

將middleWare視為我們的調度，將 fungsi2 視為我們的setDataBlog 。 從上面的簡單回調 function，我們將在瀏覽器屏幕“Ini pesan dari middle ware.”上得到 output。

此外，如果我們實際上在 function 中有一個 function 會怎樣：

fungsi2 = () => pesan=>{
    document.write(pesan)
}

我們如何打印文本？ 我們打印它的方式是像這樣調用 function：

const container = () => {
  middleWare(fungsi2())
}

好的，我們離問題的答案越來越近了。 現在，如果我們將回調中的參數設為變量怎么辦？

middleWare = callBack => {
  const action = "ini output callback"
  callBack(action);
}

fungsi2 = () => pesan =>{
    document.write(pesan)
}

const container = () => {
  middleWare(fungsi2())
}

container()

哇，可以。 意味着我們也可以在這個中間件內部調度函數。 好的，讓我們將 function 傳遞給回調

middleWare = callBack => {
  const fungsiBerupaOutput = (text) =>{
    document.write(text)
  }
  callBack(fungsiBerupaOutput)
}

fungsi2 = () => fungsi =>{
    fungsi("halo")
}

const container = () => {
  middleWare(fungsi2())
}

container()

現在我們可以從fungsi參數將 hello 文本打印到屏幕上。

總之，中間件發送了未知參數，因此我們可以打印它們。

希望對剛剛學習Java腳本的人有所幫助！

參考：

1. https://www.w3schools.com/js/js_arrow_function.asp
2. https://www.petanikode.com/javascript-fungsi/
3. https://www.petanikode.com/javascript-output/
4. https://www.geeksforgeeks.org/what-is-the-use-of-middleware-redux-thunk/