我如何在事件onClick上通过redux和redux-Saga等待reducer从API更新数据？

Question

我正在努力解决这个问题，我确实需要一些帮助。这是我的工作流程：在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为空（默认值）。在第二次单击时，detaExcelFile是一个对象，我希望它会在第一次单击时显示。};

takeLatest(constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE, loadDataExportExcelMerchantList),

[我认为，因为我调用动作来完全在onClick（function）侧调用Api和Update存储，在clickToDownLoadExcelFile运行后显示，并且api需要一些时间来响应，因此它会继续执行下一个代码而无需等待，因此dataExcelFile的结果是在第一次onClick时不会更新。您对此有什么解决方案吗？

Answer 1

要等待api响应，请使用componentDidUpdate方法

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