[Angular2] @Ngrx/store and @Ngrx/effects learning note
Just sharing the learning experience related to @ngrx/store and @ngrx/effects.
In my personal opinion, I fell there are tow different types of coding style by using
@ngrx/store only
- @ngrx/store + @ngrx/effects
So How we do with only ngrx/store?
Controller:
deleteItem(item: Item) {
this.subs['deleteItem'] = this.itemsService.deleteItem(item)
.subscribe(
(res) => {
console.log("Delete Item success", JSON.stringify(res, null, ))
this.resetItem();
},
(err) => alert("error")
);
}
Service:
export class ItemsService {
items$: Observable<Item[]> = this.store.select('items'); constructor(
private http: Http,
private store: Store<AppStore>,
private actions: ItemsActions
) {}
deleteItem(item: Item) {
return this.http.delete(`${BASE_URL}${item.id}`)
.do(action => this.store.dispatch({ type: DELETE_ITEM, payload: item }));
}
Reducer:
case DELETE_ITEM:
return state.filter(item => {
return item[comparator] !== action.payload[comparator];
});
As you can see, the working flow is like that:
Form controller we call the Service to delete the item
Service do the http call to remove the item
Then we have '.do()' method to create side effect, call dispatch
Since the return from Service is Observable, we subscribe form the controller.
Inside successfully handler, we can do any other ui side effect.
ngrx/store + ngrx/effects:
Controller:
deleteWidget(widget: Widget) {
this.store.dispatch({type: DELETE_WIDGET, payload: widget});
}
Service:
deleteWidget(widget: Widget) {
return this.http.delete(`${BASE_URL}${widget.id}`);
}
Effect:
@Effect() delete$: Observable<Action> = this.actions$
.ofType(DELETE_WIDGET)
.map(action => action.payload)
.switchMap((widget)=>{
return this.widgetsService.deleteWidget(widget)
.map(success => console.log("success"))
.catch(() => of("error")) // catch expect to get an observable back
});
Reducer:
case DELETE_WIDGET:
return state.filter(widget => {
return widget[comparator] !== action.payload[comparator];
});
So the work flow for ngrx/store + ngrx/effects:
From the controller, we just dispatch the action.
Effect listening the actions that dispatched, and trigger 'ofType' the same is dispatched action from controller.
Inside effect, we call service to delete the widget.
If http request is success, we actually can dispatch another UI action that will do the UI rendering.
If http reuqest is faild, we catch it and you actually can dispatch another UI action that will show the error in UI.
Summary:
By using only ngrx/store, we are still using the coding style we get used to, like controller talking to the service, after service done its job, return back to controller, let controller do whatever necessary.
By using ngrx/store + ngrx/effects, we are actullay walking into RxJS + Redux world, everything goes reactive, everything should have a reducer even it is UI rendering stuff.
I am not sure which way is better. My point is I am using Redux partten, take advantage of RxJS to help me handle state management esailer. But I don't know to overkill, everything conver to Observable and reducers style is way to far from the starting point -- state management.
[Angular2] @Ngrx/store and @Ngrx/effects learning note的更多相关文章
- 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+开发流程的案例:在线获取用户 ...
- [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] Setting up NgRx Router Store and the Time-Travelling Debugger
Make sure you have the@ngrx packages installed: "@ngrx/data": "^8.0.1", "@n ...
- [Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...
- NgRx/Store 4 + Angular 5使用教程
这篇文章将会示范如何使用NgRx/Store 4和Angular5.@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux.在NgRx中,状态是由一个包含action和reducer ...
- Angular应用架构设计-3:Ngrx Store
这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...
- Learning Note: SQL Server VS Oracle–Database architecture
http://www.sqlpanda.com/2013/07/learning-note-sql-server-vs.html This is my learning note base on t ...
- Course Machine Learning Note
Machine Learning Note Introduction Introduction What is Machine Learning? Two definitions of Machine ...
随机推荐
- wscript shell
http://blog.csdn.net/songques/article/details/8309569 http://baike.baidu.com/link?url=_P6z73_Ih9R79T ...
- POJ 2481 Cows (线段树)
Cows 题目:http://poj.org/problem?id=2481 题意:有N头牛,每仅仅牛有一个值[S,E],假设对于牛i和牛j来说,它们的值满足以下的条件则证明牛i比牛j强壮:Si &l ...
- 【原创】k8s源代码分析-----EndpointController
转自本人空间 http://user.qzone.qq.com/29185807/blog/1459325937 一.controller manager创建endpointController 代码 ...
- MyEclipse 2016 安装/破解
MyEclipse2016 C1 已经出现了!感觉好像不错的样子! 不多说了,开整... 好熟悉的界面,点击Next! 如上图标注1所示,请修改安装目录! 根据自己的喜好可以选择不同的版本,也可以安装 ...
- 给VG增加磁盘,给文件目录增加空间
一: #lspv 找到新增加的物理卷(逻辑驱动器,以hdisk8为例). #chdev –l hdisk8 –a pv=yes写入新的物理卷的pvid. #extendvg cwdatavg hdis ...
- selenium+python自动化处理时间控件
尝试编写12306网站查询余票信息的自动化脚本时,碰到日期选择的问题,此处做一下记录:
- 阅读笔记——Servlet
什么是Servlet Servlet是用java编写的运行在web服务器中的程序,因此它可以调用服务器端的类,它也可以被调用,它本身就是一个类. Servlet的工作原理 servlet由web服务器 ...
- http 500 Internal Server Error的错误 ajax请求SpringMVC后台中返回500 Internal Server Error
使用httprequester接口测试能返回数据,但是用ajax返回json格式的时候返回报500Internal Server Error. The server encountered an in ...
- 86.八千万qq密码按相似度排序并统计密码出现次数,生成密码库
存储qq的文件地址以及按照密码相似度排序的文件地址 //存储qq的文件的地址 ] = "QQ.txt"; //按照密码相似度排序的文件地址 ] = "QQpassword ...
- JS如何动态生成变量名[重点]
解决方案: function create_variable(num){ var name = "test_"+num; //生成函数名 ...