Question

在尝试使用 redux-observable 时，我想绕过 concat 和 concatMap 的区别。

根据我的直觉，我认为concatMap可以工作： -从FAKE_LOGIN动作开始，它将被切换到MapMap以发出FAKE_LOGIN_AUTHENTICATING动作。 -在FAKE_LOGIN_AUTHENTICATING动作内部，经过2秒钟的延迟，它将被concatMap-ed发出FAKE_LOGIN_SUCCESS动作。

但是，上述想法不起作用。我尝试了各种组合，最后偶然发现了concat运算符，并且令人惊讶地有效。

两者之间有什么区别？

下面是我的代码：

此无效工作

action$.pipe(
  switchMap(
    action => of( { type: 'FAKE_LOGIN_AUTHENTICATING' } ).pipe(
      concatMap( thing => {
        return of( { type: 'FAKE_LOGIN_SUCCESS', payload: { userId: 'user-a', userData: {} } } ).pipe(
          delay( 2000 )
        );
      } )
    )
  )
);

但这确实

action$.pipe(
  switchMap(
    action => of( { type: 'FAKE_LOGIN_AUTHENTICATING' } ).pipe(
      concat(
        of( { type: 'FAKE_LOGIN_SUCCESS', payload: { userId: 'user-a', userData: {} } } ).pipe(
          delay( 2000 )
        )
      )
    )
  )
);

Answer 1

我认为我无法完全理解您的用例，但是concatMap和concat之间的主要区别在于concatMap接受为每个项目调用的函数作为参数从其源返回一个内部Observable（它将每个项目从其源映射到Observable）。 concatMap然后仅在先前的内部Observable完成时才调用其回调。

另一方面，concat仅接受一个Observable列表，并在上一个Observable完成时一个接一个地订阅它们。

因此，在您的情况下，第一个示例只是将FAKE_LOGIN_AUTHENTICATING映射到FAKE_LOGIN_SUCCESS。

在第二个示例中，内部块与此等效：

concat(
  of({ type: 'FAKE_LOGIN_AUTHENTICATING' }),
  of({ type: 'FAKE_LOGIN_SUCCESS', payload: { userId: 'user-a', userData: {}}}).pipe(
    delay(2000),
  )
)

因此，它首先订阅of({ type: 'FAKE_LOGIN_AUTHENTICATING' })，它立即发出并完成，然后订阅of({ type: 'FAKE_LOGIN_SUCCESS'...)，它也立即发出并完成。

redux-observable-concat与concatMap之间的区别

1 个答案: