Добавьте прослушиватели событий и используйте `scan` для сохранения сокращенного состояния, затем удалите прослушиватели событий

Question

Я работаю над этой песочницей здесь - https://stackblitz.com/edit/rxjs-g7msgv?file=index.ts

Я пытаюсь сделать следующее:

1) Ждать события onLogin

2) Пока зарегистрированв, я хочу connectSocket(), и всякий раз, когда сокет отключается, и приложение находится на переднем плане, я хочу повторно connectSocket().(в песочнице я заглушил connectSocket() обещанию, которое просто ждет 5 секунд)

3) Я хочу повторить шаг 2, пока не наступит событие onLogout

Я написал этот кодздесь, пожалуйста, посмотрите в песочницу и начните все с нее, нажав кнопку «onLogin».

fromEvent(document, 'onLogin')
    .pipe(
        switchMap(() =>
            of({ isDisconnected: true, isInForeground: true }).pipe(
                mergeMap(data =>
                    concat(
                        fromEvent(document, 'onDisconnect').pipe(
                            mergeMap(() =>
                                data.isDisconnected = true
                            )
                        ),
                        fromEvent(document, 'onAppStateChange').pipe(
                            mergeMap(({ detail:{ state } }) =>
                                data.isInForeground = state === 'foreground'
                            )
                        ),
                    ).pipe(
                        mergeMap(({ isDisconnected, isInForeground }) => {
                            if (isDisconnected && isInForeground) {
                                return flatMap(() => connectSocket());
                            } else {
                                return EMPTY;
                            }
                        })
                    )
                ),
                takeUntil(fromEvent(document, 'onLogout'))
            )
        )
    )
    .subscribe(console.log);

Я использую switchMap, потому что во время его работы я не хочу, чтобы другие события входа в систему перезапускали другой поток.

Я не могу заставить это работать.Я новичок в rxjs.

Answer 1

Используйте startWith для инициации значения, и combineLatest сработает при запуске любого из событий.

fromEvent(document, 'onLogin').pipe(
    switchMap(() =>
        combineLatest(
            fromEvent(document, 'onDisconnect').pipe(
                mapTo(true),
                startWith(true)
            ),
            fromEvent(document, 'onAppStateChange').pipe(
                map(e => e.detail === 'foreground'),
                startWith(true),
            )
        ).pipe(
            mergeMap(([isDisconnected, isInForeground]) =>
                isDisconnected && isInForeground ? connectSocket() : EMPTY
            ),
            takeUntil(fromEvent(document, 'onLogout'))
        )
    )
)