наблюдаемый - разница между concat и concatMap

Question

Я пытаюсь обернуть голову вокруг разницы между concat и concatMap при использовании redux-observable .

В своей интуиции я думаю, что concatMap будет работать: - Из действия FAKE_LOGIN это будет switchMap-ed для создания действия FAKE_LOGIN_AUTHENTICATING. - Внутри действия FAKE_LOGIN_AUTHENTICATING будет выполнено concatMap для создания действия FAKE_LOGIN_SUCCESS с задержкой в ​​2 секунды.

Однако вышеупомянутое мышление не работает. Я перепробовал все виды комбинаций и, наконец, наткнулся на оператор 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 принимает в качестве параметра функцию, которая вызывается для каждого элемента из его источника и которая возвращает внутренняя наблюдаемая (она отображает каждый элемент из своего источника в наблюдаемую). concatMap затем вызывает свой обратный вызов только тогда, когда завершаются предыдущие внутренние Observables.

С другой стороны, concat просто принимает список наблюдаемых, которые подписываются на них один за другим, когда завершается предыдущая наблюдаемая.

Так что в вашем случае первый пример просто "сопоставляет" 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'...), который также генерирует немедленно и затем завершает.