带有 redux-observable 的动作序列答案

【问题标题】：Sequence of actions with redux-observable带有 redux-observable 的动作序列
【发布时间】：2018-01-24 07:16:31
【问题描述】：

这是我要实现的流程：所有用户的列表在我的后端 API 上是公开可用的，所以我希望查看该用户是否已经存在，如果不存在，则创建一个新用户。

我正在使用 Redux，并且正在使用 redux-observable 管理副作用。这是流程，以及我要发送的相关操作。

按钮单击调度操作FIND_OR_CREATE_USER。副作用应该处理接下来的步骤。
在 API 后端查找用户 - 使用 userId 参数调度 GET_USER_BY_ID_REQUEST，副作用将执行 HTTP 调用。
接收用户-dispatchGET_USER_BY_ID_SUCCESS，响应存储在状态中。
如果此响应为空，则使用CREATE_USER_REQUEST 创建一个用户。

现在唯一的问题是这个GET_USER_BY_ID_SUCCESS 也在应用程序的其他地方使用（例如，获取用户个人资料）。因此，如果响应为空，我无法收听GET_USER_BY_ID_SUCCESS 并在其后立即创建用户。只有在GET_USER_BY_ID_SUCCESS 跟在FIND_OR_CREATE_USER 之后才创建用户。

下面是我使用 redux-sagas 的方法：

function* findOrCreateUserSaga() {
  yield put({ type: 'GET_USER_BY_ID_REQUEST', payload: userId });
  yield take('GET_USER_BY_ID_SUCCESS');
  const response = yield select((state) => state.user);
  if (!response) {
    yield put({ type: 'CREATE_USER' }, payload: someObject );
  }
}

...

yield takeLatest('FIND_OR_CREATE_USER', findOrCreateUserSaga)

如何使用 redux-observable 以反应方式实现相同的流程？

【问题讨论】：

标签： redux redux-saga side-effects redux-observable

【解决方案1】：

您可以在史诗中的任何时间点创建对action$ 流的新订阅。这允许您动态启动/停止侦听特定操作以响应其他操作、工作流等。

这是示例 saga 转换为 RxJS 6（使用管道）和 redux-observable 1+（使用 state$ 流）。它使用merge 函数创建一个既发出“GET_USER_BY_ID_REQUEST”又监听“GET_USER_BY_ID_SUCCESS”的observable。此外，在内部 action$ 流管道中使用的 first 运算符会导致它在您的匹配操作发生时完成。

const epic = (action$, state$) => action$.pipe(
  ofType('FIND_OR_CREATE_USER'),
  switchMap(action =>
    merge(
      of({ type: 'GET_USER_BY_ID_REQUEST', payload: userId }),
      action$.pipe(
        ofType('GET_USER_BY_ID_SUCCESS'),
        first(),
        withLatestFrom(state$),
        mergeMap(([action, state]) =>
          state.user
            ? empty()
            : of({ type: 'CREATE_USER', payload: someObject })
        ),
      ),
    )
  ),
)

示例 saga 未指定如何创建 userId 和 someObject 变量。请注意，上述示例史诗也是如此。但是，根据您的具体用例来填补这些空白应该很容易。

【讨论】：