ngrx 初探

背景

习惯了 react + redux + redux-observable + rxjs 的技术栈之后，最近开始尝试使用 ng4 。

但是单纯的使用 ng4 就跟单纯的使用 react 一样，状态由 组件 或者 service 来进行维护，在跨组件通信等场景下，虽然也有很多方法去实现，但是总感觉不便于维护，特别是如果队友比较菜的情况下，那就是填不尽的坑，整个项目代码会变得特别松散。

简介

ngrx 其实就相当于 ng 版本的 redux + redux-observable，参见 github ：

https://github.com/ngrx/platform

从 readme 中的描述我们可以看到：

整个 ngrx 分为了四大块。

1. 其中 @ngrx/store 为主要部分，可以看作是 ng 版的 redux ，action、reducer、store 等都靠这个来维护。

2. @ngrx/effects 的作用类似于 redux-observable ，用来处理项目中的一些异步 action 之类的 side-effect 。

3. @ngrx/router-store 我感觉也是非常有用的一个模块。

   在 ng4 中对路由状态的处理比较复杂和麻烦，每次需要用的时候都需要在 RouteState 中去取相应的部分，@ngrx/router-store 可以让你定义一个格式化的功能，将自己需要的部分映射到 @ngrx/store 提供的 store 上，并在路由跳转的时候，自动监听并更新相应的值，如下图：

   

4. @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 链接，可以评论评论催催我~。