用NGRX改變狀態后如何執行一些代碼？

Question

我正在開發一個使用Angular 2.0和NGRX的應用程序。 我來自React / Redux，所以我還在想辦法做些什么。

當我想在模板中打印一些東西時，我可以這樣寫：

@Component({
  selector: 'dashboard',
  directives: [MainContainer],
  styleUrls: [
    './dashboard.style.css'
  ],
  template: `
    <main-container [section]="viewSection | async"></main-container>
  `
})
export class Dashboard {

  private viewSection: Observable<MainViewSection>;

  constructor(
    private store: Store<AppState>
  ) {
    this.viewSection = this.store.let(getMainViewSection());
  }

}

但現在我想在值更改后執行一些代碼（它將使用商店的值作為輸入（之后將更改視圖）

我知道我可以在React中使用componentWillReceiveProps 。

我發現的唯一有用的東西是這樣的：

export class View {

  constructor(
    private store: Store<AppState>
  ) {
    this.store.select('data').subscribe((val: DataState) => {
      if (!layer) {
        return;
      }
      layer.setData(val);
    });
  }

}

我不認為這是一種優雅的方式，但我無法想出另一種方式......人們告訴我使用服務（我不知道這是怎么適合這種情況）而且我已經閱讀了@Effects ，但我不知道這是不是我在找什么。

謝謝！

Answer 1

我認為@Effect肯定是你想要的。 @Effect某個狀態操作時會執行@Effect 。 以官方NgRx 示例應用程序為例

  @Effect() clearSearch$ = this.updates$
    .whenAction(BookActions.SEARCH)
    .map<string>(toPayload)
    .filter(query => query === '')
    .mapTo(this.bookActions.searchComplete([]));

使用whenAction方法指定觸發效果的操作。 在此示例中，它們使用toPayload ，它僅返回已執行操作的有效內容。 但您可以訪問應用程序的整個狀態。

這就是你如何使用它的例子：

    .whenAction(YourActions.SOMETHING)
    .switchMap(data => this._xhr.send(data.state.yourData)