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。以官方的ngrx example app

为例

  @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)

用NGRX改变状态后如何执行一些代码？

1 个答案: