[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 ...
随机推荐
- win7+SQL2008无法打开物理文件 操作系统错误 5:拒绝访问 SQL Sever
今天在win7+SQL2008的环境下操作分离附加数据库,分离出去然后再附加,没有问题.但是一把.mdf文件拷到其它文件夹下就出错,错误如下:无法打开物理文件 "E:\db\MyDB.mdf ...
- iOS 使用xmpp做聊天客户端
可以号称史上最详细的xmpp做iOS客户端聊天介绍. 简介:XMPP协议是一种基于Socket长连接.以XML格式进行基本信息交换.C/S S/S多种架构的聊天协议 XMPPServer 基于XMP ...
- spring 4 xxx 与jackson-dataformat.xxx类冲突
这段时间,做一个新的工作流的开发,在开始之初,用的jbpm,后来发现jbpm现在开发有问题,不能引用官方的工作空间,所要工作流跑不起来,于是用了activiti工作流,在配置spring和activi ...
- 跟我学android-常用控件之EditText
EditText 是TextView的直接子类,它与TextView的区别在于,EditText可以接受用户输入. 下面通过一个实例来说明EditText的用法 实例:sina 微博的登录界面(注意, ...
- 关于委托:异常{ 无法将 匿名方法 转换为类型“System.Delegate”,因为它不是委托类型 }
转自:http://www.cnblogs.com/xiaofei59/archive/2010/11/25/1887285.html 异常{ 无法将 匿名方法 转换为类型“System.Delega ...
- Phalcon 的 bootstrap.php 自动加载完成;非常人性化的设计
<?php /** * Bootstraps the application */ use Phalcon\DI\FactoryDefault as PhDi, Phalcon\Config a ...
- UVa 10020 - Minimal coverage(区间覆盖并贪心)
Given several segments of line (int the X axis) with coordinates [Li, Ri]. You are to choose the min ...
- JS之路——常用正则表达式
整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$只能输入数字:"^[0-9]*$".只能输入n位的数字:"^\d{n}$".只能输入至少n位的数 ...
- 随手写的Java向文本文件写字符串的类
今天看了一篇讲Java IO流的文章,好长时间没用IO流了,回顾了一下Java编写IO程序的思路,之前文章中有介绍.对于写二进制文件我们习惯用 面向字节类的流.对于写字符我们使用面向字符类的流.但是我 ...
- C语言指针类型 强制转换
关于C语言指针类型 强制转换 引用一篇文章: C语言中,任何一个变量都必须占有一个地址,而这个地址空间内的0-1代码就是这个变量的值.不同的数据类型占有的空间大小不一,但是他们都必须有个地址,而这个 ...