Redux-Observable 单个史诗中的多个动作 [英] Redux-Observable multiple actions in single epic

问题描述

我是新手，有几个类似的问题，例如 redux-observable - 在单个史诗中分派多个 redux 操作，但我看不到它们如何应用于我的用例.

I'm new to this and there are several similar questions such as redux-observable - dispatch multiple redux actions in a single epic but I can't see how they apply to my usecase.

我使用 Subject 来根据处理文件和上传到服务器发出多个事件

I'm using a Subject to emit multiple events based on processing a file and uploading to a server

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 want to write an epic that captures these events and dispatches actions based on the data coming back.

即.像这样

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.

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

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

i can console log the results OK, but I'm not dispatching any actions.. any ideas how I go about this?

推荐答案

发生的情况是，您返回的是 mergeMap 内的订阅，而不是它期望的 Observable.而不是使用 subscribe 看起来你想使用 map

What's happening is that you're returning a subscription inside your mergeMap, instead of an Observable that it expects. Instead of using subscribe it looks like you want to use 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.您唯一一次使用它的时候主要是与不太常见的自定义运算符一起使用.

---

In redux-observable you will almost never call subscribe yourself, instead composing Observables. The only time you'd use it is mostly with custom operators that aren't super common.

这篇关于Redux-Observable 单个史诗中的多个动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！