点击在我的博客 xuxusheng.com 中查看,有更好的排版哦~
背景
习惯了 react + redux + redux-observable + rxjs
的技术栈之后,最近开始尝试使用 ng4
。
但是单纯的使用 ng4
就跟单纯的使用 react
一样,状态由 组件
或者 service
来进行维护,在跨组件通信等场景下,虽然也有很多方法去实现,但是总感觉不便于维护,特别是如果队友比较菜的情况下,那就是填不尽的坑,整个项目代码会变得特别松散。
简介
ngrx
其实就相当于 ng
版本的 redux + redux-observable
,参见 github
:
https://github.com/ngrx/platform
从 readme
中的描述我们可以看到:
整个 ngrx
分为了四大块。
-
其中
@ngrx/store
为主要部分,可以看作是ng
版的redux
,action
、reducer
、store
等都靠这个来维护。 -
@ngrx/effects
的作用类似于redux-observable
,用来处理项目中的一些异步action
之类的side-effect
。 -
@ngrx/router-store
我感觉也是非常有用的一个模块。
在 ng4
中对路由状态的处理比较复杂和麻烦,每次需要用的时候都需要在 RouteState
中去取相应的部分,@ngrx/router-store
可以让你定义一个格式化的功能,将自己需要的部分映射到 @ngrx/store
提供的 store
上,并在路由跳转的时候,自动监听并更新相应的值,如下图:
@ngrx/store-devtools
,就和字面意思一样,是调试使用的,结合chrome
扩展redux-devtools
一起使用,效果酷酷的:chrome扩展地址传送门
相关资料
官方提供的 example
项目有点晦涩难懂,不是非常明晰,这里推荐 Redux你的Angular 2应用–ngRx使用体验 这篇文章,文章中使用的是 ng2
,如果你的项目是使用的 ng4
,那么结合这篇文章一起就行了:Migration Guide
Tips
当使用 Map
、Set
类型的变量时,在 redux-devtools
中好像没法显示出具体的值来,这是个天坑。
这个时候就无比怀念 logger
中间件了,但是官网的介绍中找不到相关的资料,传送门:ngrx-store-logger
引入之后 console
中就出现了无比熟悉的画面:
Example
有空了可以写个小 demo 出来,不过我觉得都已经用 ng4
了,引引 ngrx
这种事应该也难不倒了。
如果需要的时候我还没贴 demo 链接,可以评论评论催催我~。