React-Bootstrap-Table插入新行后，如何获取Redux API调用返回结果？

嘿，我来帮你搞定这个问题！核心思路是让你的异步Action返回一个Promise，这样组件里调用Action后就能轻松拿到执行结果。结合你提供的代码场景，我给你具体的操作步骤：

1. 改造你的异步Action，让它返回Promise #

先看你components/services/index.js里的保存Action，应该是类似这样的异步逻辑对吧？咱们把它改成返回Promise的形式，这样后续才能拿到结果：

export const saveRow = (rowData) => {
  return (dispatch) => {
    // 关键：把API请求整个包在Promise里返回
    return api.post('/rows', rowData)
      .then(response => {
        const savedRow = response.data;
        // 正常派发成功的action
        dispatch({
          type: 'SAVE_ROW_SUCCESS',
          payload: savedRow
        });
        // 把保存后的结果返回给调用方
        return savedRow;
      })
      .catch(error => {
        // 派发失败的action
        dispatch({
          type: 'SAVE_ROW_FAILURE',
          payload: error.message
        });
        // 把错误抛出去，让组件能捕获到
        throw error;
      });
  };
};

2. 在组件里调用Action并获取结果 #

现在你的Action已经返回Promise了，在组件里就可以用async/await或者链式调用.then()来拿到结果：

方式一：用async/await（更简洁） #

import { useDispatch } from 'react-redux';
import { saveRow } from '../components/services';

function YourComponent() {
  const dispatch = useDispatch();

  const handleSave = async (newRow) => {
    try {
      // 直接await dispatch的结果就行，因为Action返回了Promise
      const savedResult = await dispatch(saveRow(newRow));
      // 这里就能拿到保存后的返回数据啦！比如做个成功提示、跳转到详情页什么的
      console.log('保存成功，返回的数据：', savedResult);
      alert('行保存成功啦！');
    } catch (error) {
      // 处理保存失败的情况
      console.error('保存失败：', error);
      alert('保存失败，请重试哦');
    }
  };

  // 剩下的组件渲染逻辑...
}

方式二：用.then()链式调用 #

如果不习惯async/await，用传统的Promise链式调用也可以：

const handleSave = (newRow) => {
  dispatch(saveRow(newRow))
    .then(savedResult => {
      console.log('保存成功：', savedResult);
      // 这里写后续的操作，比如更新组件状态
    })
    .catch(error => {
      console.error('保存失败：', error);
      // 错误提示逻辑
    });
};

3. 几个要注意的小细节 #

• 确保你的Redux Store已经配置了redux-thunk中间件！因为这种返回函数的异步Action必须靠thunk来支持。如果还没配置，记得在创建Store的时候加上：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

• 如果你的项目用的是Redux Toolkit（现在官方更推荐的写法），那更省心了——它默认自带thunk，而且用createAsyncThunk写异步Action会自动返回Promise，还帮你处理了pending/fulfilled/rejected这些状态，不用手动写一堆action type：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const saveRow = createAsyncThunk(
  'rows/saveRow',
  async (rowData, { rejectWithValue }) => {
    try {
      const response = await api.post('/rows', rowData);
      return response.data;
    } catch (error) {
      // 把错误信息返回给reducer
      return rejectWithValue(error.message);
    }
  }
);

用这种方式的话，组件里调用await dispatch(saveRow(rowData))同样能拿到返回结果，还能通过Redux的状态追踪请求的加载状态，体验更好~

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