ngrx подписаться в сервисе или передать данные из компонента? - PullRequest
Новая
       9

ngrx подписаться в сервисе или передать данные из компонента?

0 голосов
/ 27 сентября 2018

Мне нужен совет, мне нужны данные из магазина в сервисе (мой сервис использует Angulartics для отправки данных в Google Analytics).Я сохранил все необходимые данные в виде объекта в хранилище, что лучше:

  1. Подписаться на хранение в моем сервисе, который каждый раз отправляет данные в аналитику.
  2. Вставить хранилище в каждый компонент,получить данные - отправить в сервис, потом отписаться?

Также, я отправляю действия при получении информации в сервисе.Как я могу создать слушатель поля магазина?(получить данные, когда это поле не будет неопределенным)

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Для меня это хорошее время для использования @ ngrx / Effects .Если вы уже используете @effects, это не должно быть слишком сложным для использования.Если нет, то общий шаблон, который вам, возможно, придется принять, состоит в том, чтобы переместить вызов службы, который загружает данные (например, побочные эффекты, такие как асинхронные вызовы службы), в файл эффектов.Затем вы можете сделать что-то подобное для отслеживания аналитических событий.Вышеуказанные преимущества заключаются в том, что он отслеживается в одном месте. 

@Effect({ dispatch: false })
trackEvents = this.actions.pipe(
  ofType(...),
  tap(({ type, payload }) => {
    // make call to Angulartics
    this.angulartics2.eventTrack.next({ 
      action: type, 
      properties: { ...payload },
    });
  })
)

Полученный код копируется с https://blog.angularindepth.com/start-using-ngrx-effects-for-this-e0b2bd9da165#8a65.

0 голосов
/ 06 марта 2019

Я прочитал эту статью https://brianflove.com/2017/11/01/ngrx-anti-patterns/ и сумел не подписываться явно в компоненте или услуге и не использовать никаких эффектов.Первый шаг - заставить сервисный метод прослушивать изменение фильтра, передавать данные по каналу в http-запрос, затем отправлять событие с этими данными и возвращать наблюдаемые результаты 

getCarItems(): Observable<ICarItem[]> {
 return  this.store.select(state => state.filter).pipe(
           map (source=> 
            {
            let productId=source.product ? source.product.productId:'';
            let brand = source.brand||'';            
            return({productId ,brand})                
            }),
        switchMap(value => this.http.get(`${this._baseUrl}api/caritems`,{params:value})),
        tap((list:ICarItem[]) => {        
          this.store.dispatch(new LoadCarItemsAction(list));}          
       ),
       switchMap(()=>this.store.select(state=>state.carItems))        
       )
}

Второй шаг - передавать результаты наблюдаемому в компоненте:

ngOnInit() {   
   this.carItems$ = this.myService.getCarItems();
  }
0 голосов
/ 27 сентября 2018

Первый подход имеет смысл, он будет держать логику в одном месте.Вам нужно подписаться на изменения магазина в вашей службе, а затем отправить это в службу аналитики:

Вы можете добавить службу Store в свои службы.Используйте store.select для выбора фрагментов состояния:

, и внутри конструктора сервиса вы можете подписаться на изменения в вашем объекте следующим образом: 

this.store.select('keyName').subscribe( (data)=> {
 // do whatever you want with this data
});
...