使用 Redux 与 Components

我们将使用来自Ng2-Redux的 选择模式(https://github.com/angular-redux/ng2-redux#the-select-pattern)将我们的组件绑定到store。为了演示它是如何工作的,让我们来看看一个带有计数器组件的小例子。

计数器示例

让我们从建立一个计数器组件开始。这个组件将负责跟踪其被点击多少次并显示该数量。

app/components/counter-component.ts

  1. import { Component } from '@angular/core';
  2. import { select } from 'ng2-redux';
  3. import { Observable } from 'rxjs';
  4. import { CounterActions } from '../actions/counter-actions';
  5. @Component({
  6. selector: 'counter',
  7. providers: [ CounterActions ],
  8. template: `
  9. <p>
  10. Clicked: {{ counter$ | async }} times
  11. <button (click)="actions.increment()">+</button>
  12. <button (click)="actions.decrement()">-</button>
  13. <button (click)="actions.incrementIfOdd()">Increment if odd</button>
  14. <button (click)="actions.incrementAsync()">Increment async</button>
  15. </p>
  16. `
  17. })
  18. export class Counter {
  19. @select() counter$: Observable<number>;
  20. constructor(public actions: CounterActions) {}
  21. }

View Example

现在应该熟悉模板语法,使用异步管道显示一个Observable计数器,并处理一些点击事件。

在这种情况下,点击事件绑定到从CounterActions ActionCreatorService调用我们的动作创建者的表达式。

让我们来看看@select的使用。

@select是Ng2-Redux的一个功能,它旨在帮助您以声明方式将 store 的状态附加到组件。您可以将其附加到组件类的属性,Ng2-Redux将创建一个Observable并将其绑定到该属性。

在这种情况下,@select没有参数,因此Ng2-Redux将查找与类变量名称相同的store属性。它省略了尾随的$,因为这只是Observables的命名约定。

所以现在,任何时间store.counter由reducer更新,counter$将收到新的值并且| async将在模板中更新它。

请注意,@select支持各种各样的参数,以允许您以非常大的灵活性选择部分Redux存储。有关更多详细信息,请参阅 Ng2-Redux 文档。

Ng2-Redux“选择模式”样式与react-redux使用的“连接”样式有点不同;然而通过使用Angular 2的DI和TypeScript的装饰器,我们可以有一个很好的声明式绑定,其中大部分的工作是在模板中完成。我们还获得Observa~blesOnPush变化检测的功能,以获得更好的性能。

无论哪种方式,我们仍然从Redux的基本原理和单向数据流中获益。