使用 Redux 与 Components

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

    app/components/counter-component.ts

    View Example

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

    让我们来看看的使用。

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

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

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

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