4

我正在使用 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());
  }

}

但是现在我想在值更改后执行一些代码（它将使用商店的值作为输入（之后将更改视图）

我知道我可以componentWillReceiveProps在 React 中做到这一点。

我发现唯一有用的是这样的：

export class View {

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

}

我不认为这是一种优雅的方式，但我想不出另一种方式。人们告诉我使用服务（我不知道这如何适合这种情况），我已经阅读过@Effects，但我没有不知道是不是我要找的。

谢谢！

4

1 回答 1

2

我认为@Effect这绝对是您正在寻找的。当某个@Effect状态动作被调用时执行。以官方 NgRx示例应用程序为例

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

使用whenAction您指定哪个动作触发效果的方法。在此示例中，他们使用toPayloadwhich 仅返回已执行操作的有效负载。但是您可以访问应用程序的整个状态。

这就是您可以使用它的方式，例如：

    .whenAction(YourActions.SOMETHING)
    .switchMap(data => this._xhr.send(data.state.yourData)
于 2016-07-28T06:15:24.373 回答