angualr8观察者模式_Angular中使用ngrx/store进行状态管理

简介

ngrx/store的灵感来源于Redux，是一款集成RxJS的Angular状态管理库，由Angular的布道者Rob Wormald开发。它和Redux的核心思想相同，但使用RxJS实现观察者模式。它遵循Redux核心原则，但专门为Angular而设计。

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

StoreModule是@ngrx/store API中的一个模块，它被用来在应用模块中配置reducer。

Action:

Action是状态的改变。它描述了某个事件的发生，但是没有指定应用的状态如何改变。

Store:

它提供了Store.select()和Store.dispatch()来与reducer协同工作。Store.select()用于选择一个selector，

Store.dispatch(

{

type:‘add’,

payload:{name:‘111’}

}

)

用于向reducer分发action的类型。

@NgRx/Store 状态管理的三个原则

首先，@NgRx/Store 同样遵守 Redux 的三个基本原则：单一数据源

这个原则是整个单页应用的状态通过object tree(对象树)的形式存储在store 里面。

这个定义十分抽象其实就是把所有需要共享的数据通过javascript 对象的形式存储下来state ={

application:'angular app',

shoppingList:['apple', 'pear']

}state is read-only(状态只能是只读形式)

这个 ngrx/store 核心之一就是用户不能直接修改状态内容。 举个例子，如果我们需要保存了登录页面状态，状态信息需要记录登录用户的名字。 当登录名字改变，我们不能直接修改状态保存的用户名字state={'username':'kat'},

//用户重新登录别的账户为tom

state