按下按钮后，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()); <--
};