Angular中的状态管理大部分可以被service接管,那么在一些中大型的项目中,这样做的弊端就会显露出来,其中之一就是状态流混乱,不利于后期维护,后来便借鉴了redux的状态管理模式并配上rxjs流式编程的特点形成了@ngrx/store这么一个作用于Angular的状态管理工具.

状态管理的三个原则

1.Single source of truth(单一状态对象)
这个原则是整个单页应用的状态通过object tree（对象树）的形式存储在store 里面。这个定义十分抽象其实就是把所有需要共享的数据通过javascript 对象的形式存储下来。

2.state is read-only(状态只能是只读形式)
这个 ngrx/store 核心之一就是用户不能直接修改状态内容。 举个例子，如果我们需要保存了登录页面状态，状态信息需要记录登录用户的名字。 当登录名字改变，我们不能直接修改状态保存的用户名字

3.changes are made with pure functions（只能通过调用函数来改变状态）
由于不能直接需改状态，ngrx/store 同时引入了一个叫做reducer（聚合器）的概念。通过reducer 来修改状态。

ngrx/store使用实例

安装：npm install @ngrx

1.    创建actions

2.    定义一个reducer通过所提供的action来处理计数器state的变化。

3.在src/app/xxx.module.ts中导入 StoreModule from @ngrx/store 和 counter.reducer

在Module的imports array添加StoreModule.forRoot,并在StoreModule.forRoot中添加count 和 countReducer对象。StoreModule.forRoot()函数会注册一个用于访问store的全局变量。

   4.在组件中使用，订阅count$ Observable，获取里面store的数据，通过创建函数并分发（dispatch）Increment,Decrement和Reset actions 修改数据。

咔咔组供稿