React Redux：异步API添加项后如何重新加载表格列表？

我最近刚好处理过React/Redux + .NET Core API的类似场景，你的思路完全正确——因为后端生成的keyId是在创建时才生成的，没法提前预知，所以确实不能直接把新项追加到现有列表里，必须重新拉取完整数据来同步。下面是具体的实现方案：

• 核心逻辑：利用Redux Action中的Promise链式调用，确保AddItem的API请求成功返回后，立即发起LoadItems请求刷新列表，同时完成页面跳转。

• Action文件实现示例：
  假设我们用axios调用.NET Core API，下面是action的具体写法：

  // actions/itemActions.js
  import axios from 'axios';
  
  // 添加数据项的Action
  export const addItem = (itemData) => {
    return (dispatch) => {
      // 发起POST请求到.NET Core API
      return axios.post('/api/items', itemData)
        .then(response => {
          // 可选：dispatch添加成功的Action，用于更新前端状态或提示
          dispatch({ type: 'ADD_ITEM_SUCCESS', payload: response.data });
          // 链式调用加载列表的Action，确保获取最新数据
          return dispatch(loadItems());
        })
        .catch(error => {
          dispatch({ type: 'ADD_ITEM_FAILURE', payload: error });
          throw error; // 抛出错误让组件层处理异常
        });
    };
  };
  
  // 加载数据列表的Action
  export const loadItems = () => {
    return (dispatch) => {
      return axios.get('/api/items')
        .then(response => {
          // 更新Redux store中的列表数据
          dispatch({ type: 'LOAD_ITEMS_SUCCESS', payload: response.data });
        })
        .catch(error => {
          dispatch({ type: 'LOAD_ITEMS_FAILURE', payload: error });
          throw error;
        });
    };
  };
  

• 组件中的调用方式：
  在添加页面的组件里，调用addItem后通过Promise的then方法完成页面跳转：

  // components/AddItemForm.js
  import { useDispatch } from 'react-redux';
  import { addItem } from '../actions/itemActions';
  import { useNavigate } from 'react-router-dom';
  
  const AddItemForm = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
  
    const handleSave = (formData) => {
      dispatch(addItem(formData))
        .then(() => {
          // 所有请求成功后跳转到列表页面
          navigate('/items');
        })
        .catch(error => {
          // 处理错误，比如显示错误提示
          console.error('添加数据失败:', error);
        });
    };
  
    // 表单渲染逻辑
    return (
      <form onSubmit={(e) => {
        e.preventDefault();
        // 收集表单数据并调用handleSave
        const formData = { /* 从表单获取的数据 */ };
        handleSave(formData);
      }}>
        {/* 表单输入元素 */}
        <button type="submit">保存</button>
      </form>
    );
  };
  
  export default AddItemForm;
  

• 方案优势：

  • 彻底避免了前端数据与后端不一致的问题：重新拉取列表能确保拿到包含新生成keyId的完整数据。
  • Promise链式调用保证了执行顺序：只有AddItem请求成功完成，才会触发列表刷新和页面跳转，不会出现请求竞态导致的异常。

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