Nach Betätigung des Buttons ist die Versandfunktion wirkungslos

Question

Dies ist eine Aktionsfunktion, die mit Redax verwendet wird (sie funktioniert perfekt, seit ich sie verwendet habe)

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));
    }
  };
};

Wenn die Schaltfläche gedrückt wird, muss ich eine Anfrage an den Server stellen und den Status aktualisieren

Dies ist die Funktion, die ausgeführt wird, wenn Sie auf die Schaltfläche klicken:

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

Ich habe es überprüft, das Formular wurde an das Backend gesendet und alles ist in Ordnung, bis auf „fetchCategory“

Ich habe versucht, useEffect zu verwenden, um dieses Problem zu lösen

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

Ich habe versucht, verschiedene Abhängigkeiten zu installieren, aber ohne Ergebnis. Wie kann dieses Problem gelöst werden?

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()); <--
};