@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. 跟我学android-android常用布局介绍

    在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...

  2. Taxi Cab Scheme POJ && HDU

    Online Judge Problem Set Authors Online Contests User Web Board Home Page F.A.Qs Statistical Charts ...

  3. Log4j实现对Java日志的配置全攻略

    1. 配置文件 Log4J配置文件的基本格式如下: #配置根Logger log4j.rootLogger = [ level ] , appenderName1 , appenderName2 , ...

  4. 安装SVN及实现nginx web同步更新需要在WDCP一键安装包的基础上

    一.安装 1.查看是否安装cvs rpm -qa | grep subversion 2.安装 yum install subversion 3.测试是否安装成功 /usr/bin/svnserve ...

  5. 人民币符号¥在css和html正确显示

    商城项目需要涉及到人民币的页面现实问题.但是¥(指的是通常输入法中文全角模式下按shift+4的那个)在宋体(v3.03, v5.0)的情况下是显示一杠.常见的其他字体微软雅黑(Microsoft Y ...

  6. Xshell下漂亮的开发环境配置

    今天折腾了一天Xshell配置Linux命令行开发环境. 总结几点: 1.Xshell配色方案,这是我自己调的个人使用版,网上比较好的版本有Solarized Dark,可以下载到. [ColorFo ...

  7. Dapper中使用存储分页。

    #region 分页获取数据 /// <summary> /// 分页获取数据 /// </summary> /// <typeparam name="T&qu ...

  8. 网络流的一个很厉害的ppt

    链接: http://pan.baidu.com/s/1dECtMpz 密码: hdbm

  9. SVN客户端忽略无关文件-备

    修改前请先备份文件 ~/.subversion/config. 1,打开Terminal,输入命令: $ open ~/.subversion/config   2,在打开的文件中寻找:`global ...

  10. 文档整体解决方案(readthedocs、github 、sphinx)使用

    这里是总结了一下,用的工具或者平台:readthedocs.github .sphinx. 使用这三个工具即可轻松创建高效的文档管理库,可以用来翻译,水平再高一点可以写书. readthedocs 文 ...