ngrx/store effects 使用总结2：列表展示
第一个计数器案例：http://www.cnblogs.com/axel10/p/8589122.html
完成了计数器案例后，现在开始比较能够完整的展示angular2+开发流程的案例：在线获取用户列表并展示，包含点击删除功能。希望在开始之前，你对typescript和rxjs有一定了解。
再重复一遍开发流程：
开始 -> 编写数据模型 -> 编写action -> 编写redurces并配置到相应module -> 编写services -> 编写effects并配置到相应module -> 创建组件 -> 组件绑定数据模型 -> 渲染
第一步：编写数据模型（app/models/user.ts）
export class User {
id: number;
name: string;
}
第二步：编写action（app/actions/num.ts）
import {Action} from '@ngrx/store';
import {User} from '../models/user';
export enum ListActionType {
Load = 'LOAD',
LoadSuccess = 'LOAD_SUCCESS',
RemoveUser = 'REMOVE_USER',
RemoveUserSuccess = 'REMOVE_USER_SUCCESS',
RemoveUserError = 'REMOVE_USER_ERROR'
}
export class Load implements Action {
readonly type = ListActionType.Load;
}
export class LoadSuccess implements Action {
readonly type = ListActionType.LoadSuccess;
constructor(public payload: User[]) {
}
}
export class RemoveUser implements Action {
readonly type = ListActionType.RemoveUser;
constructor(public payload: number) {
}
}
export class RemoveUserSuccess implements Action {
readonly type = ListActionType.RemoveUserSuccess;
}
export class RemoveUserError implements Action {
readonly type = ListActionType.RemoveUserError;
}
第三步：编写redurcers（app/redurces/list.ts）
import {Action} from '@ngrx/store';
import {User} from '../models/user';
import {ListActionType, LoadSuccess, RemoveUser} from '../actions/list';
export interface State {
loading: boolean;
loaded: boolean;
list: User[];
}
const initialState: State = {
loading: false,
loaded: false,
list: []
};
export const list = (state = initialState, action: Action) => {
switch (action.type) {
case ListActionType.Load:
console.log('load....');
return {
...state,
loading: true,
};
case ListActionType.LoadSuccess:
console.log('load success');
const myA = (<LoadSuccess>action).payload;
console.log(myA);
return {
...state,
loaded: true,
loading: false,
list: myA
};
case ListActionType.RemoveUser:
console.log('remove user');
const userId = (<RemoveUser>action).payload;
state.list = state.list.filter(function (item) {
return item.id !== userId;
});
return {...state};
default:
return state;
}
};
配置redurcer（app/app.module.ts）
imports: [ BrowserModule, RouterModule.forRoot(routes), StoreModule.forRoot({ modelNum, list}), //配置redurcer ],
第四步：编写services（app/services/ListService.ts）
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {User} from '../models/user';
@Injectable()
export class ListService {
public getList(): Observable<any> {
return this.http.get<{ users: User[] }>('/api/users.json');
}
public removeUser(): Observable<any> {
return Observable.create(function (observer) {
observer.next('true');
});
}
constructor(private http: HttpClient) {
}
}
第五步：编写effects：
import {Injectable} from '@angular/core';
import {Actions, Effect, ofType} from '@ngrx/effects';
import {Observable} from 'rxjs/Observable';
import {Action} from '@ngrx/store';
import {ListActionType, Load, LoadSuccess, RemoveUser, RemoveUserError, RemoveUserSuccess} from '../actions/list';
import {catchError, map, switchMap} from 'rxjs/operators';
import {ListService} from '../services/ListService';
import {of} from 'rxjs/observable/of';
@Injectable()
export class ListEffects {
@Effect()
loadList$: Observable<Action> = this.action$.pipe( //rxjs写法。loadList$是effect名，在外部没有用到，可以随便起。
ofType<Load>(ListActionType.Load),
switchMap(action => {
return this.listService.getList().pipe(map(
users => {
return new LoadSuccess(users);
}
));
})
);
@Effect()
removeUser$: Observable<Action> = this.action$.pipe(
ofType<RemoveUser>(ListActionType.RemoveUser),
switchMap(_ => {
return this.listService.removeUser().pipe(
map(res => {
console.log(res);
if (res === 'true') {
return new RemoveUserSuccess();
} else {
return new RemoveUserError();
}
}),
catchError(err => of(new RemoveUserError()))
);
})
);
constructor(private action$: Actions, private listService: ListService) {
}
}
记得在app.module.ts配置effects和HttpClient：
imports: [
BrowserModule,
RouterModule.forRoot(routes),
StoreModule.forRoot({modelNum, list}),
EffectsModule.forRoot([ListEffects]),
HttpClientModule
],
第六步：创建组件
ng g component list
第七步：组件绑定数据模型（连带完成第八步）
组件ts文件：
import {Component, OnInit} from '@angular/core';
import {Store} from '@ngrx/store';
import * as list from '../actions/list';
import {State} from '../reducers/list';
import {User} from '../models/user';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
public list: User[];
constructor(private store: Store<any>) {
this.store.select('list').subscribe(_list => {
if (_list) {
console.log(_list);
console.log(_list.list);
this.list = _list.list;
}
});
}
removeUser(id) {
console.log(id);
this.store.dispatch(new list.RemoveUser(id));
}
ngOnInit() {
this.store.dispatch(new list.Load());
}
}
组件html文件：
<div> list 请尝试点击上半部分的li。 <ul> <li *ngFor="let item of list" (click)="removeUser(item.id)">{{item.name}}</li> </ul> <app-list-body></app-list-body> <br/> <a routerLink="/model">to counter demo</a> </div>
最后配置路由：
import {Routes} from '@angular/router';
import {IndexComponent} from './index/index.component';
import {ModelDemoComponent} from './model-demo/model-demo.component';
import {ListComponent} from './list/list.component';
export const routes: Routes = [
{
path: 'list',
component: ListComponent
},
{
path: 'model',
component: ModelDemoComponent
},
{
path: '**',
redirectTo: 'list'
}
];
到此本案例结束。如果想要更加复杂的案例可以到ngrx的github获取。https://github.com/ngrx/platform
