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

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为null（默认值）。在第二次点击时，detaExcelFile 是一个对象，我预计它会在第一次点击时显示。 };

takeLatest(constants.CLICK_TO_EXPORT_EXCEL_MERCHANT_LIST_FILE, loadDataExportExcelMerchantList),

我想因为我调用动作来调用 Api 和更新存储正好在侧 onClick(function) 之后显示 clickToDownLoadExcelFile 运行和 api 需要一些时间来响应，它继续执行下一个代码而不等待，因此 dataExcelFile 的结果不会在第一次点击时更新。你有什么解决办法吗？

Answer 1

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

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

Answer 2

我遇到了同样的问题，并通过 return 想从操作中获取数据来解决。然后dispatch后直接拿到

const data = await clickToDownloadExcelFile(dataSearch);

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

How can I wait reducer update data from API on event onClick with redux and redux - Saga?

api

asynchronous

reactjs

redux-saga

react-redux