redux - 从 redux-observable 中调度多个 Action

Question

我正在尝试将多个操作分派(dispatch)给 redux。这是我的代码

 action$.pipe(
    ofType(trigger),
    mergeMap(({ payload }) =>
      from(endpoint(payload)).pipe(
        map(response =>

          // this works fine
          // setData(response.data)

          // this doesn't
          concat(
            of(setData(response.data)),
            of({ type: 'hello' })
          )

          // I also tried
          [
            of(setData(response.data)),
            of({ type: 'hello' })
          ]

        )
      )
    ),

    catchError(err => Promise.resolve(creators.setError(err)))
  )

单个调度有效，但如果我像上面那样尝试多个项目，我会收到 Uncaught Error: Actions must be plain objects。使用自定义中间件进行异步操作。

Answer 1

map 只是将一项映射到另一项，因此当您返回 [action1, action2] 时，您仍然返回一个数组和 redux-observable 试图将其视为一个 Action 本身。相反，您想要的是“展开”返回的数组(或使用 concat 创建的 Observable)。

因此，除了使用 map，您还可以使用 mergeMap(或 concatMap)，当您返回一个数组时，它会迭代它并使每个项目的单独排放:

mergeMap(response => [
  setData(response.data),
  { type: 'hello' },
]),

如果这看起来很奇怪，你可以用 from 包装数组以使其更明显:

mergeMap(response => from([
  setData(response.data),
  { type: 'hello' },
])),

您甚至可以使用单个of:

mergeMap(response => of(
  setData(response.data),
  { type: 'hello' },
)),