使用 3rd-party 回调的调度操作答案

【问题标题】：Dispatching action with 3rd-party callback使用 3rd-party 回调的调度操作
【发布时间】：2017-11-02 08:39:17
【问题描述】：

在我的应用程序中，我有一个工人 Saga，它从 3rd 方库中调用一个方法。第 3 方库是支付服务（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。我也读过这种方法可能是一种反模式。

是否有不同/更好的方法来处理这个问题？

【问题讨论】：

当我必须处理诸如记录器、分析等第三方库时。我倾向于创建一个middleware 负责与这些库进行交互，这样我可以将应用程序的逻辑与那些第三方的逻辑。因此，理想情况下，您可以从中间件分派您的操作，考虑到您可以访问 dispatch 函数。
太好了，你有什么资源可以指点我吗？
我个人是从官方文档here开始的。这真的很简单！在那之后，我才开始做出自己的个人改变。如果您想了解更多关于中间件的信息，您可以阅读整页

标签： reactjs react-redux redux-saga

【解决方案1】：

做这样的事情怎么样

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 });
  }
}

【讨论】：