1 ngrx store 简介
对于ngrx store 在angualr2/4 的官方文档介绍不多。所以我在这里简单介绍一下ngrx store的概念。ngrx store 是借用redux 对于single page application的状态管理（state management）理念并且结合了rxjs来实现的。随着single page application （单页web应用）变得越来越复杂，前端对于state management(状态管理) 变得日益困难。 传统的mvc 结构框架没法轻易解决前端对于数据的处理，不同于j2ee 应用，不同页面的数据交互可以通过session 或者cookie 来解决。 在angualr里面不同component ，module(模块)间的交互，最常用的是使用service 来共享数据。 但是随着component 和模块的增多。 service对于共享数据的处理让应用变得越来越混论和难以管理。所以ngrx-store 横空出世， 用来解决发杂的单页应用的状态管理。
State manage(状态管理) 有三个原则
1 Single source of truth(单一状态对象)
这个原则是整个单页应用的状态通过object tree（对象树）的形式存储在store 里面。这个定义十分抽象其实就是把所有需要共享的数据通过javascript 对象的形式存储下来
例子
state=
{
application:'angular4',shoppingList:['iphone'.'HTC']
}
2state is read-only(状态只能是只读形式)
这个ngrx-store 核心之一就是用户不能直接修改状态内容。 举个例子，如果我们需要保存了登录页面状态，状态信息需要记录登录用户的名字。 当登录名字改变，我们不能直接修改状态保存的用户名字
state={'username':'kat'},//用户重新登录别的账户为tom
state.username='tom'//在ngrxstore这个行为是绝对不允许的
那么你也许会为，不这样修改我怎么修改啊？ 这里ngrx 引入了一个action的概念。通过store.dispatch(action)触发修改。 之后我会使用例子说明
3 changes are made with pure functions（只能通过调用函数来改变状态）
由于不能直接需改状态，ngrx store 同时引入了一个叫做reducer（聚合器）的概念。通过reducer 来修改状态。
functionreducer(state='SHOW_ALL',action){
switch(action.type){
case'SET_VISIBILITY_FILTER':
returnObject.assign({},newObj);
default:
returnstate}}
4 如何安装ngrx store
npminstall@ngrx/core@ngrx/store--save
4.1 如果你使用的angular-cli 那么webpack会自动帮你处理配置
你只需要import 就可以使用
import{Store}from'@ngrx/store';
map:{
'@ngrx/store':'nodemodules/@ngrx/store/**/bundles/*.js',}
