[Angular 2] Using ngrx/store and Reducers for Angular 2 Application State
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的更多相关文章
- NgRx/Store 4 + Angular 5使用教程
这篇文章将会示范如何使用NgRx/Store 4和Angular5.@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux.在NgRx中,状态是由一个包含action和reducer ...
- [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 ...
- [Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...
- Angular应用架构设计-3:Ngrx Store
这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...
- Redux你的Angular 2应用--ngRx使用体验
Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...
- 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2
翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...
- Redux 和 ngrx 创建更佳的 Angular 2
Redux 和 ngrx 创建更佳的 Angular 2 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build- ...
- ngrx/store effects 使用总结2:列表展示
第一个计数器案例:http://www.cnblogs.com/axel10/p/8589122.html 完成了计数器案例后,现在开始比较能够完整的展示angular2+开发流程的案例:在线获取用户 ...
- ngrx/store effects 使用总结1:计数器
本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀 ...
随机推荐
- 泛型,迭代器,LinkedList<E>
1 <e>里面只能填类,不能用基本数据类型,不过integer 这样的的也行 2在模板类(泛型类中)class demo<e>由于不知道e是那个,所有通常都是重写大家都有的to ...
- [转]Traits 编程技法+模板偏特化+template参数推导+内嵌型别编程技巧
STL中,traits编程技法得到了很大的应用,了解这个,才能一窥STL奥妙所在. 先将自己所理解的记录如下: Traits技术可以用来获得一个 类型 的相关信息的. 首先假如有以下一个泛型的迭代器类 ...
- (转载)让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- angularJS中XHR与promise
angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起 ...
- 驱动读写进程内存R3,R0通信
stdafx.h 头文件代码 #ifndef _WIN32_WINNT // Allow use of features specific to Windows XP or later. #defin ...
- Razor 语法
Razor 语法 原文:Razor Syntax Reference作者:Taylor Mullen.Rick Anderson翻译:刘怡(AlexLEWIS)校对:何镇汐 什么是 Razor? ...
- C:\WINDOWS\system32\config\systemprofile\Desktop引用了一个不可用的位置
使用迅雷下载压缩文件到桌面时,下载完毕后,如果直接点击"打开文件",则迅雷会报错: C:\WINDOWS\system32\config\systemprofile\Desktop ...
- GitHub NetFlow
https://github.com/search?l=Java&p=1&q=netflow&ref=searchresults&type=Repositories&a ...
- C#程序设计基础——转义字符
\’ 单引号 \” 双引号 \\ 反斜杠 \0 空字符 \a 感叹号 \b 退格 \f 换页 \n 换行 \r 回车 \t 水平Tab \v 垂直Tab
- ISO7816协商模式和特定模式
ISO7816协议的协商模式和特定模式好多使用者都搞不明白,还经常有客户电话询问,这里将其澄清一下: ISO7816协议的协商模式和特定模式由复位应答字节TA2确定,下面是TA2的字节定义 TA2的存 ...