ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular 2 application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

// main.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {provideStore} from '@ngrx/store';
import {clock} from './reducer'; bootstrap(App, [
provideStore({clock})
]).then(
()=> console.log('App running...'),
err=> console.log(err)
); /*
* 1. Create a reducer
* 2. Use provideStore({reducer_name}) to provide store
* 3. Use store.select('reducer_name') to get store in Observable type
* 4. Apply logic to dispatch the action
* */
// app.ts

/**
* Created by wanzhen on 26.4.2016.
*/
import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/scan';
import 'rxjs/add/operator/mapTo';
import {Subject} from "rxjs/Subject";
import {Store} from '@ngrx/store'; @Component({
selector: 'app',
template: `
<button (click)="click$.next()">Update</button>
<h1>{{clock | async | date:'yMMMMEEEEdjms'}}</h1>
`
})
export class App {
click$ = new Subject(); clock; constructor(store:Store) {
this.clock = store.select('clock'); Observable.merge(
this.click$.mapTo('hour'),
Observable.interval().mapTo('second')
)
.subscribe((type)=>{
store.dispatch({type})
})
}
}
// reducer.ts

export const clock = (state = new Date(), {type})=> {
const date = new Date(state.getTime());
switch(type){
case 'second':
date.setSeconds(date.getSeconds() + );
return date; case 'hour':
date.setHours(date.getHours() + );
return date; } return state;
};

[Angular 2] Using ngrx/store and Reducers for Angular 2 Application State的更多相关文章

  1. NgRx/Store 4 + Angular 5使用教程

    这篇文章将会示范如何使用NgRx/Store 4和Angular5.@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux.在NgRx中,状态是由一个包含action和reducer ...

  2. [Angular] How to get Store state in ngrx Effect

    For example, what you want to do is navgiate from current item to next or previous item. In your com ...

  3. [Angular 2] ngrx/store

    @ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...

  4. Angular应用架构设计-3:Ngrx Store

    这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...

  5. Redux你的Angular 2应用--ngRx使用体验

    Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...

  6. 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2

    翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...

  7. Redux 和 ngrx 创建更佳的 Angular 2

    Redux 和 ngrx 创建更佳的 Angular 2 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build- ...

  8. ngrx/store effects 使用总结2:列表展示

    第一个计数器案例:http://www.cnblogs.com/axel10/p/8589122.html 完成了计数器案例后,现在开始比较能够完整的展示angular2+开发流程的案例:在线获取用户 ...

  9. ngrx/store effects 使用总结1:计数器

    本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀 ...

随机推荐

  1. 泛型,迭代器,LinkedList<E>

    1 <e>里面只能填类,不能用基本数据类型,不过integer 这样的的也行 2在模板类(泛型类中)class demo<e>由于不知道e是那个,所有通常都是重写大家都有的to ...

  2. [转]Traits 编程技法+模板偏特化+template参数推导+内嵌型别编程技巧

    STL中,traits编程技法得到了很大的应用,了解这个,才能一窥STL奥妙所在. 先将自己所理解的记录如下: Traits技术可以用来获得一个 类型 的相关信息的. 首先假如有以下一个泛型的迭代器类 ...

  3. (转载)让ie6也支持max-width,和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. angularJS中XHR与promise

    angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起 ...

  5. 驱动读写进程内存R3,R0通信

    stdafx.h 头文件代码 #ifndef _WIN32_WINNT // Allow use of features specific to Windows XP or later. #defin ...

  6. Razor 语法

    Razor 语法 原文:Razor Syntax Reference作者:Taylor Mullen.Rick Anderson翻译:刘怡(AlexLEWIS)校对:何镇汐   什么是 Razor? ...

  7. C:\WINDOWS\system32\config\systemprofile\Desktop引用了一个不可用的位置

    使用迅雷下载压缩文件到桌面时,下载完毕后,如果直接点击"打开文件",则迅雷会报错: C:\WINDOWS\system32\config\systemprofile\Desktop ...

  8. GitHub NetFlow

    https://github.com/search?l=Java&p=1&q=netflow&ref=searchresults&type=Repositories&a ...

  9. C#程序设计基础——转义字符

    \’ 单引号 \” 双引号 \\ 反斜杠 \0 空字符 \a 感叹号 \b 退格 \f 换页 \n 换行 \r 回车 \t 水平Tab \v 垂直Tab

  10. ISO7816协商模式和特定模式

    ISO7816协议的协商模式和特定模式好多使用者都搞不明白,还经常有客户电话询问,这里将其澄清一下: ISO7816协议的协商模式和特定模式由复位应答字节TA2确定,下面是TA2的字节定义 TA2的存 ...