[Angular 2] Dispatching Action with Payloads and type to Reducers
2016-04-27 01:52
706 查看
While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state.
// reducer.ts export const SECOND = "SECOND"; export const HOUR = "HOUR"; export const clock = (state = new Date(), {type, payload})=> { const date = new Date(state.getTime()); switch(type){ case SECOND: date.setSeconds(date.getSeconds() + payload); return date; case HOUR: date.setHours(date.getHours() + payload); return date; } return state; };
//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'; import {SECOND, HOUR} from './reducer'; @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({type: HOUR, payload: 1}), Observable.interval(1000).mapTo({type: SECOND, payload: 1}) ) .subscribe((action)=>{ store.dispatch(action) }) } }
// 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 * */
相关文章推荐
- Part 21 to 22 AngularJS anchorscroll
- angularjs 动态生成多个checkboxs,但只能选择一个
- angular控制器之间的通信
- 创建自己的AngularJS - 作用域继承(一)
- AngularJS基础
- 基于angularjs的瀑布流插件angular-waterfull.js
- angularJS 事件广播与接收[转]
- 学习angularjs总结(一)
- [Angularjs]ng-include 包含
- angular-schema-form 自动表单生成
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- Angular2入门——(2)模板语法
- 学习AngularJs:Directive指令用法(完整版)
- AngularJS 日期转换
- Angularjs基础(九)
- AngularJS开发人员最常犯的10个错误
- AngularJS 日期转换字符串
- [置顶] 跟我学AngularJs:router路由与多重视图详解
- [Angular 2] Handling Clicks and Intervals Together with Merge
- [Angular 2] Handling Click Events with Subjects