@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的更多相关文章

  1. [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 ...

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

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

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

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

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

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

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

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

  6. [Angular2] @Ngrx/store and @Ngrx/effects learning note

    Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...

  7. [转]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 ...

  8. [Angular 2] @ngrx/devtools demo

    Check the Github: https://github.com/ngrx/devtools Example:

  9. [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 ...

随机推荐

  1. win7+SQL2008无法打开物理文件 操作系统错误 5:拒绝访问 SQL Sever

    今天在win7+SQL2008的环境下操作分离附加数据库,分离出去然后再附加,没有问题.但是一把.mdf文件拷到其它文件夹下就出错,错误如下:无法打开物理文件 "E:\db\MyDB.mdf ...

  2. iOS 使用xmpp做聊天客户端

    可以号称史上最详细的xmpp做iOS客户端聊天介绍. 简介:XMPP协议是一种基于Socket长连接.以XML格式进行基本信息交换.C/S  S/S多种架构的聊天协议 XMPPServer 基于XMP ...

  3. spring 4 xxx 与jackson-dataformat.xxx类冲突

    这段时间,做一个新的工作流的开发,在开始之初,用的jbpm,后来发现jbpm现在开发有问题,不能引用官方的工作空间,所要工作流跑不起来,于是用了activiti工作流,在配置spring和activi ...

  4. 跟我学android-常用控件之EditText

    EditText 是TextView的直接子类,它与TextView的区别在于,EditText可以接受用户输入. 下面通过一个实例来说明EditText的用法 实例:sina 微博的登录界面(注意, ...

  5. 关于委托:异常{ 无法将 匿名方法 转换为类型“System.Delegate”,因为它不是委托类型 }

    转自:http://www.cnblogs.com/xiaofei59/archive/2010/11/25/1887285.html 异常{ 无法将 匿名方法 转换为类型“System.Delega ...

  6. Phalcon 的 bootstrap.php 自动加载完成;非常人性化的设计

    <?php /** * Bootstraps the application */ use Phalcon\DI\FactoryDefault as PhDi, Phalcon\Config a ...

  7. UVa 10020 - Minimal coverage(区间覆盖并贪心)

    Given several segments of line (int the X axis) with coordinates [Li, Ri]. You are to choose the min ...

  8. JS之路——常用正则表达式

    整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$只能输入数字:"^[0-9]*$".只能输入n位的数字:"^\d{n}$".只能输入至少n位的数 ...

  9. 随手写的Java向文本文件写字符串的类

    今天看了一篇讲Java IO流的文章,好长时间没用IO流了,回顾了一下Java编写IO程序的思路,之前文章中有介绍.对于写二进制文件我们习惯用 面向字节类的流.对于写字符我们使用面向字符类的流.但是我 ...

  10. C语言指针类型 强制转换

    关于C语言指针类型 强制转换  引用一篇文章: C语言中,任何一个变量都必须占有一个地址,而这个地址空间内的0-1代码就是这个变量的值.不同的数据类型占有的空间大小不一,但是他们都必须有个地址,而这个 ...