Как синхронизировать данные в приложении? - PullRequest
Новая
       4

Как синхронизировать данные в приложении?

0 голосов
/ 24 июня 2018

У меня много компонентов, отображающих один или несколько продуктов, предоставляемых службой. 

getProducts() {
    return this.http.get('/api/products');
}

getProduct(id) {
    return this.http.get('/api/product/'+id);
}

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

saveProduct(product) {
    if(product._id) {
        return this.http.put('/api/product/'+product._id, product);
    }

    return this.http.post('/api/product', product);
}

Эти компоненты отображаются одновременно, но не связаны напрямую друг с другом.Итак, всякий раз, когда происходит изменение, мне нужно уведомить все другие компоненты об этом изменении.

Я думаю, что наблюдаемые пути - это путь, но я не уверен, как начать.

Как правильно хранить данные в моем приложении?

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Если ваша цель состоит в многоадресной передаче данных, используйте RXJS Subject или BehaviorSubject Subject действует как мост / прокси между источником Observable и многими observers, позволяя нескольким observers совместно использовать одно и то же Observable исполнение.

Преимущества BehaviorSubject над Subject

  1. Всегда будет возвращать текущее значение при подписке - звонить не нужно onnext().
  2. Имеет функцию getValue() для извлечения последнего значения в виде необработанных данных.
  3. Это гарантирует, что компонент всегда получает самые последние данные.
  4. Вы можете получить наблюдаемое от субъекта поведения, используя asobservable() метод на BehaviorSubject.
  5. Subject vs BehaviorSubject

Услуги 

private firstResponse=new BehaviorSubject<any>('');
 private secondResponse=new BehaviorSubject<any>('');
      CurrentDatafirst = this.firstResponse.asObservable();
      CurrentDatasecond = this.secondResponse.asObservable();

   getProducts() {
    return this.http.get('/api/products').
      subscribe(result=>this.firstResponse.next(result));//push data into observable
}

getProduct(id) {
    return this.http.get('/api/product/'+id).
           subscribe(result=>this.secondResponse.next(result));//push data into observable
}

Component1: 

ngOnInit()
{
  this.CurrentDatafirst.subscribe(//value=>your logic);
  this.CurrentDatasecond.subscribe(//value=>your logic)

}

Component2: 

 ngOnInit()
    {
      this.CurrentDatafirst.subscribe(//value=>your logic);
      this.CurrentDatasecond.subscribe(//value=>your logic)

    }
0 голосов
/ 24 июня 2018

То, что вы ищете, это магазин.Наиболее известным из них является Redux , который используется практически в каждом приложении React.У Angular есть собственная альтернатива, основанная на Redux и называемая ngrx store .

...