Как лучше всего подписаться на изменение состояния NGRX в представлении?

Question

Я новичок в ngrx и rxjs, поэтому я думаю, что, вероятно, есть простое решение для этого, которое мне пока не очевидно: -)

У меня настроено и работает магазин ngrx со следующим состоянием:

• AppState
  • ThreadsState (Entity)

У меня все действия и редукторы настроены нормально. Когда пользователь создает новое Сообщение, я отправляю действие MessageCreated, в результате которого новое сообщение добавляется в мое хранилище (свойство массива объекта Thread), что, в свою очередь, обновляет мое представление. Ура!

Наблюдаемое для моего Thread работает и теперь включает новое Сообщение:

thread$ = store.pipe(select(selectThreadWithMessages(id));

Моя проблема в том, что мне нужен способ обновить свойство вновь созданного сообщения (isNew = true, чтобы анимация применялась в поле зрения). Но я не хочу просто применять это ко всем сообщениям. У меня это «работает», просто применяя его к последнему Message в массиве (который всегда должен быть самым новым), но это не похоже на «правильный» путь.

Что если я захочу отреагировать на новый поступающий предмет, когда нет простого способа узнать, какой это?

Вот что я подумал сделать:

Может быть, изначально подписаться на хранилище, чтобы получить исходные данные, а также иметь поток Messages, который добавляется в коллекцию ..? Похоже, что это может обойти цель магазина с самого начала ...

Может быть, вывести Messages в собственное состояние функции и иметь отдельный селектор для этого? Но, возможно, это не очень поможет с моей первоначальной проблемой.

Полагаю, что в целом все сводится к тому, чтобы ссылаться на наблюдаемый набор Message[] и правильно применять новые отдельные экземпляры Message, которые появляются после загрузки представления.

Мне нравится идея реактивного программирования, но для меня это, очевидно, еще не вторая натура.

Любой совет, высоко ценится ..!

Answer 1

Самым простым решением может быть добавление ThreadsState (Entity) для отдельного хранения «самого последнего созданного сообщения».Затем вы можете подписаться на это сообщение и, когда оно изменится, реагировать соответствующим образом.

Если вы используете эффекты ngrx, альтернативной идеей может быть внедрение потока Actions в ваш компонент и подписка на MessageCreatedдействия (похоже, это будет работать только в том случае, если полезная нагрузка действия MessageCreated содержала достаточно информации для идентификации , какое сообщение было создано).

т.е.

constructor(
  private actions$: Actions,
) {}

ngOnInit() {
  this.subscriptions.push(
    this.actions$.pipe(ofType(MessageCreated)).subscribe(action => {
      // do stuff
    })
  )
}

ngOnDestroy() {
  this.subscriptions.forEach(sub => sub.unsubscribe())
}