Angular4 ngrxstore简介和安装

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'  //在ngrx store 这个行为是绝对不容许的

那么你也许会为，不这样修改我怎么修改啊？ 这里ngrx 引入了一个action的概念。经过store.dispatch(action)触发修改。 以后我会使用例子说明

3 changes are made with pure functions（只能经过调用函数来改变状态）

因为不能直接需改状态，ngrx store 同时引入了一个叫作reducer（聚合器）的概念。经过reducer 来修改状态。

function reducer(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return Object.assign({},newObj);  
      
      default:
      return state  }}

4 如何安装ngrx store

npm install @ngrx/core @ngrx/store --save

4.1 若是你使用的angular-cli 那么webpack会自动帮你处理配置

你只须要import 就可使用

import { Store } from '@ngrx/store';

4.2 若是你使用时旧版的systemjs文件的那么你须要

添加

map: {
    '@ngrx/store': 'nodemodules/@ngrx/store/**/bundles/*.js',
  }