将 redux-saga 转换为 redux-observable

Question

我是响应式编程的新手，想将以下代码从 redux-saga 翻译成 redux-observable。

这个想法是等待一些 API 调用，等待 5 秒，然后调度另一个动作。

function* mySaga(action) {
  const response = yield call(someApiCall);
  yield call(delay, 5000);
  yield put({ type: 'ACTION' });
}

这是我在 redux-observable 中的做法：

action$
  .ofType('SOME_ACTION')
  .mergeMap(someApiCall)
  .delay(5000)
  .map(() => ({ type: 'ACTION' }))

Answer 1

假设您省略了原始示例中的 yield takeEvery('SOME_ACTION', mySaga) 内容，您的翻译是准确的。

但是我建议隔离你的 Observable 链；将所有要应用的东西放在 someApiCall() 之后，放在 mergeMap:

内

action$
  .ofType('SOME_ACTION')
  .mergeMap(action =>
    someApiCall()
      .delay(5000)
      .map(() => ({ type: 'ACTION' }))
  )

即使它在您的示例中没有任何功能差异，但如果您或团队成员稍后进入并尝试添加错误处理，那么您不要让错误在 mergeMap 之外冒泡：

action$
  .ofType('SOME_ACTION')
  .mergeMap(action =>
    someApiCall()
      .delay(5000)
      .map(() => ({ type: 'ACTION' }))
      .catch(error => Observable.of({
        type: 'SOME_ACTION_FAILED',
        payload: error
      }))
  )

如果你把 catch 放在 top-level Observable 上，在 mergeMap 之后，错误会冒泡到 top-level 链，虽然你会捕获错误，您的史诗将不再监听未来的操作。

如果不清楚原因，我建议您更多地了解 Observables + 运算符的工作原理——我保证没那么可怕！这是一个很棒的视频，甚至触及 "isolating your observable chains" 以在正确的位置捕获错误。 https://youtu.be/3LKMwkuK0ZE?t=20m15s

将 redux-saga 转换为 redux-observable

Converting redux-saga to redux-observable

redux-saga

redux-observable