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'//在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';

4.2 如果你使用时旧版的systemjs文件的那么你需要

添加

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!