angular4实战（4）ngrx

ngrx

ngrx是angular的状态管理库，与react-redux相同，都是由redux的基础上延伸出来。本次演示的示例为通过ngrx的状态管理来控制HTTP请求服务的全局loading动画显示。如下：

ngrx地址：https://github.com/ngrx

ngrx主要有四个模块，分别是
ngrx/store， ngrx/effects， ngrx/router-store， ngrx/store-devtools
本次实例用的是ngrx 4.x版本，因为没有跟路由关联，也没有复杂的行为，只用到了ngrx/store。

同react-redux 相似，ngrx的核心也是通过reducer来获取储存在store中的值（状态），通过action来改变store的中值（状态）。关于action，reducer及store不再介绍。详情参考我之前的文章：http://blog.youkuaiyun.com/j_bleach/article/details/78070539。ngrx和react-redux本质没什么区别。

定义loading的action和reducer

在项目中创建ngrx文件夹，并在之下创建action和reducer文件。reducer文件夹下，创建index.ts作为各个reducer的汇总，便于之后管理拓展。

reducer

// loading =>index.ts
import * as load from '../../action/loading';