mobx & mobx-angular: как обновить и подписаться на обновленное значение из магазина? - PullRequest
Новая
       96

mobx & mobx-angular: как обновить и подписаться на обновленное значение из магазина?

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

У меня угловое приложение v6, и я использую последнюю версию mobx и mobx-angular (вы можете видеть в зависимости).Я исходил из ngrx, фона ngxs, так что трудно понять поток mobx, потому что он более или менее angular-service подходит с чем-то дополнительным (с производительностью также).

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

DEMO APP

store.ts 

@Injectable()
export class Store {

    @observable counter: number = 0;

    constructor() { }

    @action count() {
        this.counter ++;
    }
}

app.component.ts 

export class AppComponent  {

  _counter:number=0;

  constructor(private store:Store){}

  ngOnInit(){
    // how to subscribe to updated value of counter from service and assign it to this._counter ????

    this._counter = this.store.counter;
  }
}

app.component.html 

    <div *mobxAutorun>Counter : {{store.counter}}<br /></div>

______________________________________________

<div>Counter : {{store.counter}}<br /></div>

______________________________________________


<div>how to subscribe to updated value form 'counter' variable to '_counter' local variable????</div><br />

<div> {{_counter}} </div>

<button (click)="store.count()">Count</button>

1 Ответ

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

Вы можете установить подписку RxJs в ngOnInit. 

ngOnInit() {
  this.store.toRx(this.store, 'counter')
    .subscribe(val => this._counter = val)
}

toRx - это удобная функция, которую можно добавить в магазин.
Она использует функцию Mobx observe(), котораяпросто активирует обратный вызов каждый раз, когда указанный элемент изменяется.

import { Injectable } from '@angular/core';
import { action, observable, observe } from 'mobx';
import { Observable } from 'rxjs';

@Injectable()
export class Store {
  ...
  toRx(obj, prop) {
    return Observable.create(observer =>
      observe(obj, prop, (change) => observer.next(change.newValue), true)
    );
  }
}

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

@Injectable()
export class Store {
  ...    
  @observable counterWrapper = { counter: 0 };

, просто измените первый параметр toRx

this.store.toRx(this.store.counterWrapper, 'counter')
  .subscribe(val => this._counter = val)
...