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',
  }