如何在Redux的DeleteItem动作中调用FetchToDo实现列表自动刷新？

当前代码的问题在于DeleteItem并非符合redux-thunk规范的action creator，无法在异步删除操作完成后触发FetchToDo来刷新列表，且then回调的写法错误（{ FetchToDo }是一个对象，不会被执行）。

以下是修改后的代码：

import Axios from "axios";

export const ChangeTodoCount = (newCount) => {
  return {
    type: "CHANGE_TODO_COUNT",
    payload: newCount,
  };
};

export const FetchToDo = () => {
  return (dispatch) => {
    Axios.get("http://localhost:2000/todo").then((response) => {
      dispatch({
        type: "GET_TODO",
        payload: response.data,
      });
      dispatch({
        type: "CHANGE_TODO_COUNT",
        payload: response.data.length,
      });
    }).catch(error => {
      console.error("获取待办列表失败:", error);
    });
  };
};

export const DeleteItem = (id) => {
  return (dispatch) => {
    Axios.delete(`http://localhost:2000/todo/${id}`)
      .then(() => {
        // 删除成功后触发列表刷新
        dispatch(FetchToDo());
      })
      .catch(error => {
        console.error("删除待办项失败:", error);
      });
  };
};

修改说明 #

1. 调整DeleteItem结构：让它返回一个接收dispatch参数的函数，符合redux-thunk的异步action要求，这样才能在异步操作完成后触发其他action。
2. 修正回调逻辑：在Axios.delete的成功回调里，调用dispatch(FetchToDo())，自动触发待办列表的重新获取，无需手动刷新页面。
3. 优化URL写法：使用模板字符串替代字符串拼接，让代码更简洁易读。
4. 添加错误处理：新增catch块处理请求失败的情况，避免因网络或接口问题导致的异常。

内容的提问来源于stack exchange，提问作者Dreynaldis