单一史诗中的Redux-Observable多重动作

时间:2018-03-06 20:52:13

标签: redux react-redux redux-observable

我是新手,有几个类似的问题,例如redux-observable - dispatch multiple redux actions in a single epic,但我看不出它们如何适用于我的用例。

我正在使用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$
}

想要编写一个能够捕获这些事件并根据返回的数据发送动作的史诗。

即。像这样的东西

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

我收到了这个错误:

  

TypeError:您提供了一个无效的对象,其中包含一个流。   您可以提供Observable,Promise,Array或Iterable。

我可以控制台记录结果确定,但我不会发送任何行动..任何想法我如何去做?

1 个答案:

答案 0 :(得分:1)

发生的事情是您在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,而是编写Observables。您使用它的唯一时间主要是使用不常见的自定义运算符。