[Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will transform the way you approach state management in your Angular 2 applications. This lesson takes an existing Angular 2 app and refactors it to utilize @ngrx/store, touching on all of the major concepts along the way!
Link: https://github.com/btroncone/ngrx-store-in-ten
The approach I took is a little bit different from the one shown in Github.
People reducer:
For perople reducer, mainly three things:
- Add person
- Remove person
- Toggle person state
export const people = (state = defaultPeople, {type, payload}) => {
switch(type){
case TOGGLE_STATE:
return state.map( (person) => {
if(person.name === payload.name){
let state = person.state ? !person.state : true;
return Object.assign({}, person, {state});
}
return person;
});
case ADD_PERSON:
return [
...state,
{name: payload, time: new Date()}
];
case DELETE_PERSON:
var index = state.indexOf(payload);
console.log(index);
return [
...state.slice(, index),
...state.slice(index+),
];
default:
return state;
}
};
Then on the interface, add input and buttons:
<ul>
<li [style.textDecoration]="person.state ? 'line-through': 'none'" (click)="person$.next(person)" *ngFor="#person of people | async">
{{person.name}} is in {{person.time | date : 'jms'}}
<button (click)="deletePerson$.next(person)">Remove</button>
<button (click)="toggleState(person)">Toggle</button>
</li>
</ul>
<br>
<input type="text" #personInp><button (click)="addPerson$.next(personInp.value); personInp.value=''">Add</button>
Add Person:
addPerson$ = new Subject()
.map( (person) => ({type: ADD_PERSON, payload: person}));
Here we create an Action: {type: ADD_PERSON, payload: person}.
Dispatch the action:
Observable.merge(
...
this.addPerson$,
...
)
.subscribe(store.dispatch.bind(store))
Toggle Person:
For add person, we use Subject() to emit the event. For toggle person, we just use normal function to dispatch the action:
toggleState(person){
this.store.dispatch({type: TOGGLE_STATE, payload: person})
}
Filter:
Filter reducer add function which will be passed into the Array.filter() function:
export const filter = (state = person => person, {type, payload}: {type: ""}) => {
switch(type){
case SHOW_ALL:
return person => person;
case SHOW_AVAILABLE:
return person => !person.state;
case SHOW_BUSY:
return person => person.state;
default:
return state;
}
}
Tamplete:
<button (click)="all$.next()">Show All</button>
<button (click)="available$.next()">Show Available</button>
<button (click)="busy$.next()">Show Busy</button>
Use Subject:
all$ = new Subject()
.mapTo({type: SHOW_ALL}); available$ = new Subject()
.mapTo({type: SHOW_AVAILABLE}); busy$ = new Subject()
.mapTo({type: SHOW_BUSY});
Dispatch:
Observable.merge(
this.person$,
this.addPerson$,
this.deletePerson$,
this.available$,
this.all$,
this.busy$
)
.subscribe(store.dispatch.bind(store))
Update store:
this.people = Observable.combineLatest(
this.people,
this.filter,
( people, filter) => {
return people.filter(filter);
}
);
-------------------------
[Angular 2] ngrx/store的更多相关文章
- [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 eas ...
- NgRx/Store 4 + Angular 5使用教程
这篇文章将会示范如何使用NgRx/Store 4和Angular5.@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux.在NgRx中,状态是由一个包含action和reducer ...
- Angular应用架构设计-3:Ngrx Store
这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...
- ngrx/store effects 使用总结1:计数器
本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀 ...
- ngrx/store effects 使用总结2:列表展示
第一个计数器案例:http://www.cnblogs.com/axel10/p/8589122.html 完成了计数器案例后,现在开始比较能够完整的展示angular2+开发流程的案例:在线获取用户 ...
- [Angular2] @Ngrx/store and @Ngrx/effects learning note
Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- [Angular 2] @ngrx/devtools demo
Check the Github: https://github.com/ngrx/devtools Example:
- [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 ...
随机推荐
- 跟我学android-android常用布局介绍
在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...
- Taxi Cab Scheme POJ && HDU
Online Judge Problem Set Authors Online Contests User Web Board Home Page F.A.Qs Statistical Charts ...
- Log4j实现对Java日志的配置全攻略
1. 配置文件 Log4J配置文件的基本格式如下: #配置根Logger log4j.rootLogger = [ level ] , appenderName1 , appenderName2 , ...
- 安装SVN及实现nginx web同步更新需要在WDCP一键安装包的基础上
一.安装 1.查看是否安装cvs rpm -qa | grep subversion 2.安装 yum install subversion 3.测试是否安装成功 /usr/bin/svnserve ...
- 人民币符号¥在css和html正确显示
商城项目需要涉及到人民币的页面现实问题.但是¥(指的是通常输入法中文全角模式下按shift+4的那个)在宋体(v3.03, v5.0)的情况下是显示一杠.常见的其他字体微软雅黑(Microsoft Y ...
- Xshell下漂亮的开发环境配置
今天折腾了一天Xshell配置Linux命令行开发环境. 总结几点: 1.Xshell配色方案,这是我自己调的个人使用版,网上比较好的版本有Solarized Dark,可以下载到. [ColorFo ...
- Dapper中使用存储分页。
#region 分页获取数据 /// <summary> /// 分页获取数据 /// </summary> /// <typeparam name="T&qu ...
- 网络流的一个很厉害的ppt
链接: http://pan.baidu.com/s/1dECtMpz 密码: hdbm
- SVN客户端忽略无关文件-备
修改前请先备份文件 ~/.subversion/config. 1,打开Terminal,输入命令: $ open ~/.subversion/config 2,在打开的文件中寻找:`global ...
- 文档整体解决方案(readthedocs、github 、sphinx)使用
这里是总结了一下,用的工具或者平台:readthedocs.github .sphinx. 使用这三个工具即可轻松创建高效的文档管理库,可以用来翻译,水平再高一点可以写书. readthedocs 文 ...