Reactjs 如何正确地对RxJS和redux observable中的操作进行排序和反应?

Reactjs 如何正确地对RxJS和redux observable中的操作进行排序和反应?,reactjs,asynchronous,redux,rxjs,redux-observable,Reactjs,Asynchronous,Redux,Rxjs,Redux Observable,我还在学习RxJS的诀窍。我在我的项目中使用了redux observable,我非常喜欢它。然而,我觉得我在这里没有掌握一些基本原理,所以我想请你帮忙 以下是示例代码: const requestDelete=action$=>{ const actionSuccess$=action$.pipe( 类型(类型。可能失败或成功的行动), 以(1)为例, mergeMap(=>of(actions.deleteSuccess())) ) const actionFailed$=操作$.pipe(

我还在学习RxJS的诀窍。我在我的项目中使用了
redux observable
,我非常喜欢它。然而,我觉得我在这里没有掌握一些基本原理,所以我想请你帮忙

以下是示例代码:

const requestDelete=action$=>{
const actionSuccess$=action$.pipe(
类型(类型。可能失败或成功的行动),
以(1)为例,
mergeMap(=>of(actions.deleteSuccess()))
)
const actionFailed$=操作$.pipe(
ofType(类型。可能失败的动作),
以(1)为例,
合并映射(=>of(actions.deleteFailed()))
)
返回操作$.pipe(
ofType(类型.请求\删除),
合并映射(操作=>
从(SomeService.delete(action.payload)).pipe(
合并映射(=>
合并(
actionSuccess$,
actionFailed$,
of(actions.requestAnActionThatMayFail())
)
),
catchError(err=>of(actions.deleteFailed(err)))
)
),
catchError(err=>
的({type:'CRITICAL_REQUEST_DELETE_ERROR',err})
)
)
}
这就是我心目中的流程:

  • 用户请求删除某些资源
  • 调用
    SomeService
    来执行此操作
  • 如果它解决了,我想调用可能失败的
    requestanaction
    。现在,我想依靠这一行动的结果,等待它完成
  • 如果可以,我想使用
    actions.deleteSuccess())
  • 如果失败,我想用
    actions.deleteFailed()
    触发错误等
  • 现在,问题是-这段代码很有效,但是
    merge
    对我来说感觉很糟糕。我认为应该使用
    concat
    并将(actions.requestanactionthattayfail())的
    作为第一个参数。如果我更改流的顺序或使用
    concat
    ,整个epic将无法运行。你知道问题出在哪里吗

    如果我改变了流的顺序

    我怀疑它不会以这种方式工作,因为
    requestAnActionThatMayFail
    是一个同步操作。这解释了为什么,因为
    merge
    将按顺序订阅提供的可观察对象,这意味着如果

    合并(
    actionFailed$,
    of(actions.requestAnActionThatMayFail()),
    actionSuccess$,
    )
    
    如果
    requestAnActionThatMayFail
    成功,它将不起作用,因为
    actionSuccess$
    尚未订阅(
    actionFailed$
    已订阅)。如果可能失败的请求操作是异步的,则不应该遇到此问题

    或者使用concat

    concat
    merge
    ,其中
    concurrent
    设置为1。虽然
    merge
    可以有多个活动的内部观察值,
    concat
    只能有一个。当设置了
    concurrent
    时,
    merge
    将缓冲超出的值,当一个内部可观察值完成时,它将使用最早的缓冲值并从中创建一个内部可观察值。
    解释与上一节中的解释相同:其他观测值尚未订阅

    因此,我的方法如下:

    const requestDelete=action$=>{
    const actionSuccess$=action$.pipe(
    类型(类型。可能失败或成功的行动),
    以(1)为例,
    mergeMap(=>of(actions.deleteSuccess()))
    )
    const actionFailed$=操作$.pipe(
    ofType(类型。可能失败的动作),
    以(1)为例,
    合并映射(=>of(actions.deleteFailed()))
    )
    const requestDelete$=操作$.pipe(
    ofType(类型.请求\删除),
    合并映射(操作=>
    从(SomeService.delete(action.payload)),
    mergeMap(=>of(actions.requestAnActionThatMayFail()),
    catchError(err=>of(actions.deleteFailed(err)))
    ),
    //由于前面的错误,这似乎有点多余`
    //catchError(err=>
    //的({type:'CRITICAL_REQUEST_DELETE_ERROR',err})
    // )
    )
    //确保所有的广播都已订阅
    返回合并(actionSuccess$、actionFailed$、requestDelete$);
    }
    
    如果我改变了流的顺序

    我怀疑它不会以这种方式工作,因为
    requestAnActionThatMayFail
    是一个同步操作。这解释了为什么,因为
    merge
    将按顺序订阅提供的可观察对象,这意味着如果

    合并(
    actionFailed$,
    of(actions.requestAnActionThatMayFail()),
    actionSuccess$,
    )
    
    如果
    requestAnActionThatMayFail
    成功,它将不起作用,因为
    actionSuccess$
    尚未订阅(
    actionFailed$
    已订阅)。如果可能失败的请求操作是异步的,则不应该遇到此问题

    或者使用concat

    concat
    merge
    ,其中
    concurrent
    设置为1。虽然
    merge
    可以有多个活动的内部观察值,
    concat
    只能有一个。当设置了
    concurrent
    时,
    merge
    将缓冲超出的值,当一个内部可观察值完成时,它将使用最早的缓冲值并从中创建一个内部可观察值。
    解释与上一节中的解释相同:其他观测值尚未订阅

    因此,我的方法如下:

    const requestDelete=action$=>{
    const actionSuccess$=action$.pipe(
    类型(类型。可能失败或成功的行动),
    以(1)为例,
    mergeMap(=>of(actions.deleteSuccess()))
    )
    const actionFailed$=操作$.pipe(
    ofType(类型。可能失败的动作),
    以(1)为例,
    合并映射(=>of(actions.deleteFailed()))
    )
    const requestDelete$=操作$.pip