Наблюдаемые пожары только один раз

Question

Я решил взять это руководство по RxJS на выходных, чтобы узнать о реактивном программировании. Цель состоит в том, чтобы создать простую страницу, которая генерирует интерактивный список пользователей из пользовательского API Github с использованием Observables.

Отображаемый список является подмножеством общего числа найденных пользователей (в моем случае 3 из 30). Список необходимо обновить (показать новый набор пользователей), и вы должны иметь возможность удалять записи из него, нажимая кнопку «удалить» на каждой соответствующей записи.

Я создал цепочку Observables, чтобы определить поведение страницы. Некоторые действуют как события для запуска обработки, а некоторые публикуют обработанные результаты для использования в приложении. Эта цепочка должна динамически вызывать обновление моего списка. В настоящее время поток по умолчанию выглядит следующим образом:

• Запуск!
• Предложения обновлений сработали! (это где данные извлекаются)
• 30 новых предложений доступны!
• Обновление списка вызвано! (здесь я выбираю 3 пользователей для отображения)
• Список обновлен! (на данный момент список отображается на странице)

Обновление списка запускается при запуске, обновляя список и удаляя что-либо из списка. Однако, когда я обновляю список, это происходит:

• Нажата кнопка Обновить!
• Предложения по обновлению сработали!
• 30 новых предложений доступны!

Как видите, триггер для обновления списка пользователей не выключен. Насколько я понимаю, испуская какое-то значение в начале потока, остальная часть потока должна выполняться последовательно. Однако, похоже, что это происходит только в первый раз, когда я бегу по цепочке. Чего мне не хватает?

Вы можете найти работающую версию моего проекта здесь .

Answer 1

Я думаю, что проблема в том, как userStream$ Наблюдаемые созданы.

Фильтрация пользователей, не закрытых , а затем взятие первых 3 - это то, что можно сделать непосредственно в массиве UserModel [], передаваемом в цепочку каналов с помощью displayEvents$ с помощью filter и slice методов. массива.

Если вы сделаете это, вы избавитесь от необходимости использовать функцию from для создания Observable<UserModel>, к которому вам затем придется применить flatMap (который в настоящее время более известен как mergeMap), чтобы применить окончательно toArray чтобы преобразовать его обратно в массив UserModel.

Другими словами, вы можете упростить код, как в следующем примере, который в качестве побочного эффекта решает проблему refresh .

this.userStream$ = this.displayEvent$.pipe(
      map(users => users
                .filter((user: UserModel) => !this.closedUsers.has(user))
                .slice(0, this.numberOfUsers))
      // flatMap((users: UserModel[]) => from(users))
      // // Don't include users we've previously closed.
      // , filter((user: UserModel) => !this.closedUsers.has(user))
      // , take(this.numberOfUsers)
      // , toArray()
      , tap(() => console.log('List updated!'))
      // Unless we explicitly want to recalculate the list of users, re-use the current result.
      , shareReplay(1));

Если честно, я не до конца понял, почему ваше оригинальное решение, которое является своего рода длинным обходом, не работает.