Reactjs 如何等待reducer使用redux和redux-Saga在事件onClick上从API更新数据？

我正在努力解决这个问题，我真的需要一些帮助。这是我的工作流程： 在onClick（）事件中，我启动一个操作，将数据对象传输到reducer和reduxSaga。当调用API成功时，我在Redux Saga中使用put（）函数用API的响应更新状态。尽管每个操作似乎都是同步的，但我在第一次单击按钮时会得到旧数据。这是我的代码，请查看并帮助我

以下是我的行动：

export const clickToDownloadExcelFile = (data) => ({
  type: constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE,
  data,
});

这是我的减速机：

case constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE:
      return { ...state };

    case constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE_SUCCESS:
      return { ...state, dataExcelFile: action.data };

    case constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE_FAILED:
      return { ...state };

以下是我的传奇故事：

function* loadDataExportExcelMerchantList(actions) {
  try {
    const sendData = {
      feeCode: actions.data.feeCode,
      payChannel: actions.data.payChannel,
      typeSource: actions.data.typeSource,
      status: actions.data.status,
      merchantCode: actions.data.merchantCode,
      applyDate: actions.data.applyDate,
      expirationDate: actions.data.expirationDate,
      contract: actions.data.contract,
    };
    const data = yield call(apiFeeMerchantListExportExcel, sendData);
    yield put({
      type: constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE_SUCCESS,
      data,
    });
  } catch (error) {
    yield put({
      type: constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE_FAILED,
    });
  }
}

以下是我的onClick函数：

exportFile = async () => {
    const { clickToDownloadExcelFile, dataSearch, dataExcelFile } = this.props;

    /**/ I start a action right here when I click on the button:**

    await clickToDownloadExcelFile(dataSearch);
     **// I want to get updated data from API in here. have any solution to do it?**
    console.log('dataExcelFile', dataExcelFile);

//我第一次单击按钮时，dataExcelFile为null（默认值）。在第二次单击时，detaExcelFile是一个我希望在第一次单击时显示的对象。 };

---

我认为，因为我调用了action来调用Api，并在side onClick（函数）中准确地更新存储，show-after-clickToDownLoadExcelFile运行，Api需要一些时间来响应，所以它不需要等待就可以继续执行下一个代码，所以dataExcelFile的结果不会在第一次onClick时更新。您对此有什么解决方案吗？

要等待api响应，请使用

componentDidUpdate

方法

componentDidUpdate(prevProps){
  if(prevProps.dataExcelFile != this.props.dataExcelFile){
    console.log(this.props.dataExcelFile)
  }
}

---

我也有同样的问题，通过从行动中返回想要的数据来解决。然后在发送后直接获取

---

const data=wait clickToDownloadExcelFile（数据搜索）
我知道componentDidUpdate。但是，我想在onClick函数中使用dataExcelFile道具。执行clickToDownloadExcelFile（）操作后，dataExcelFile将在存储区中更改，我希望在第一次单击时使用dataExcelFile的新值。这是不可能的。为什么
componentdiddupdate
不是选项？我正在制作一个导出excel文件按钮。当我点击按钮时，我将调用一个API，API将向我响应一个数组。我需要响应数据作为输出excel文件的输入。所以我认为componentDidUpdate对于这种情况是不可能的。如何从componentDidUpdate获取数据以在onClick函数中使用？不要在
onClick
中使用它，请在
componentDidUpdate
中使用它。在
onClick中调用api
并在
componentDidUpdate中导出excel文件
componentDidUpdate(prevProps){
  if(prevProps.dataExcelFile != this.props.dataExcelFile){
    console.log(this.props.dataExcelFile)
  }
}