Redux-Observable 单个史诗中的多个动作

beek 发表于 Dev

溪

我对此很陌生，并且有几个类似的问题，例如redux-observable - 在单个史诗中分派多个 redux 操作，但我看不到它们如何应用于我的用例。

我正在使用 Subject 来基于处理文件和上传到服务器发出多个事件

export function UploadSceneWithFile(scene){

  const subject$ = new Subject()

  FileToScenePreview(scene,scene.file).then(res => subject$.next(res))

  const uploader = new S3Upload({
   ....
    onError:()=>subject$.next('error'),
    onProgress: (val)=> subject$.next(val),
    onFinishS3Put: ()=>subject$.next('complete'),
  })
  uploader.uploadFile(scene.file)

  return subject$
}

A 想写一个史诗来捕捉这些事件并根据返回的数据分派动作。

IE。像这样的东西

export function uploadSceneFile(action$) {
  return action$.ofType(CREATE_SCENE_SUCCESS)
    .mergeMap(({payload}) =>
      UploadSceneWithFile(payload)
        .subscribe(res => {
            console.log(res)
          if (!res.thumbName) {
            return { type: UPLOAD_SCENE_FAILED, message: 'failed' }
          } else {
            return {type: UPLOAD_SCENE_SUCCESS, payload:  res }
          }
        if (!res.value) {
            return { type: UPLOAD_SCENE_THUMB_FAILED, message: 'failed' }
          } else {
            return {type: UPLOAD_SCENE_THUMB_SUCCESS, payload:  res }
          }
        })
    )
}

我收到此错误：

类型错误：您提供了一个预期流的无效对象。您可以提供 Observable、Promise、Array 或 Iterable。

我可以控制台记录结果，但我没有调度任何操作..我有什么想法吗？

杰菲尔普斯

发生的事情是您在您的中返回订阅mergeMap，而不是它期望的 Observable。而不是使用subscribe它看起来像你想使用map

export function uploadSceneFile(action$) {
  return action$.ofType(CREATE_SCENE_SUCCESS)
    .mergeMap(({payload}) =>
      UploadSceneWithFile(payload)
        .map(res => { // <------------------ map, not subscribe
            console.log(res)
          if (!res.thumbName) {
            return { type: UPLOAD_SCENE_FAILED, message: 'failed' }
          } else {
            return {type: UPLOAD_SCENE_SUCCESS, payload:  res }
          }
        if (!res.value) {
            return { type: UPLOAD_SCENE_THUMB_FAILED, message: 'failed' }
          } else {
            return {type: UPLOAD_SCENE_THUMB_SUCCESS, payload:  res }
          }
        })
    )
}

在 redux-observable 中，您几乎永远不会调用subscribe自己，而是编写 Observable。您使用它的唯一一次主要是与不是非常常见的自定义运算符。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。