Reactjs 使用第三方回调发送操作

在我的应用程序中，我有一个从第三方库调用方法的工人传奇。第三方库是一个支付服务（Zuora），该方法初始化iframe表单并在组件中呈现它。第三方库方法需要回调函数，该函数在提交iframe表单时调用

下面是这一传奇的简化视图：

function* render(action) {
  try {
    const callback = function(response) {
      if (response.success) {
        // DISPATCH ACTION HERE
      }
    }

    ZUORALIBRARY.render(callback);
    yield put({...action, type: RENDER_SUCCESS});

  } catch (e) {
    yield put({...action, type: RENDER_FAIL, errors: e});
  }
}

我想在回调中发送一个操作，但没有成功。这涉及到尝试将回调函数转换为生成器，并使用

yield

/

put

。我也读过这种方法可能是一种反模式

---

是否有其他/更好的方法来处理此问题

像这样做怎么样

import { call, put } from "redux-saga/effects";

function renderIframe() {
  return new Promise((resolve, reject) => {
    ZUORALIBRARY.render(response => {
      if (response.success) {
        resolve(response);
      } else {
        reject();
      }
    });
  });
}

function* render(action) {
  try {
    const result = yield call(renderIframe);
    yield put({ ...action, type: RENDER_SUCCESS });
  } catch (e) {
    yield put({ ...action, type: RENDER_FAIL, errors: e });
  }
}

---

当我必须处理第三方库（如记录器、分析等）时，我倾向于创建一个负责与这些库交互的

中间件
，这样我就可以将应用程序的逻辑与这些第三方的逻辑分开。因此，理想情况下，您可以从中间件发送您的操作，考虑到您可以在那里访问
dispatch
功能。太好了，您有什么可以向我提供的资源吗？我个人从官方文档开始。真的很简单！在那之后，我开始做我自己的个人改变。如果您想了解更多有关中间件的信息，可以阅读整个页面