按下按鈕後，dispatch函數無效

Question

這是一個與redax一起使用的動作函數（它完美地工作，因為我使用了它）

export const fetchCategory = () => {
  return async (dispatch) => {
    try {
      dispatch(settingsSlice.actions.settingsFetching());
      const response = await request("/category/getAll", "POST", {});
      dispatch(settingsSlice.actions.settingsFetchingSuccess(response));
    } catch (e) {
      dispatch(settingsSlice.actions.settingsFetchingError(e));
    }
  };
};

當按鈕被按下時，我需要向伺服器發出請求並更新狀態

這是當您點擊按鈕時執行的函數：

const buttonHandler = async () => {
    await request("/category/create", "POST", {
      newCategory: {
        label: form.categoryLabel,
        limit: form.categoryLimit,
      },
    });
    setForm(initialState);
    fetchCategory();
  };

我已經檢查過，表單已經發送到後端，除了"fetchCategory"之外，一切正常

我已經嘗試使用useEffect來解決這個問題

useEffect(() => {
    fetchCategory();
  }, [Button , buttonHandler]);

我嘗試安裝不同的依賴項，但沒有結果。如何解決這個問題？

Answer 1

你需要 dispatch 這個動作！

你的 fetchCategory 函式是一個 "thunk action creator"。呼叫 fetchCategory() 會建立一個 thunk 動作，但不會對其執行任何操作。你需要呼叫 dispatch(fetchCategory()) 來執行這個動作。

const buttonHandler = async () => {
    await request("/category/create", "POST", {
      newCategory: {
        label: form.categoryLabel,
        limit: form.categoryLimit,
      },
    });
    setForm(initialState);
--> dispatch(fetchCategory()); <--
};