角中如何使用ngrx做状态管理

　　介绍

小编给大家分享一下角中如何使用ngrx做状态管理,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

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

角中的状态管理大部分可以被服务接管,那么在一些中大型的项目中,这样做的弊端就会显露出来,其中之一就是状态流混乱,不利于后期维护,后来便借鉴了回家的的状态管理模式并配上RxJS流式编程的特点形成了@ngrx/存储这么一个作用于角的状态管理工具。

<李>

StoreModule:
StoreModule是@ngrx/存储API中的一个模块,它被用来在应用模块中配置减速机。

<李>

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

<李>

存储:
它提供了Store.select()和Store.dispatch()来与减速器协同工作.Store.select()用于选择一个选择器,
商店。调度(
{
类型:“添加”,
有效载荷:{名称:“111”}
}
)
用于向减速机分发行动的类型。

<强> @NgRx/存储状态管理的三个原则

首先,@NgRx/存储同样遵守回来的的三个基本原则:

<李>

单一数据源

这个原则是整个单页应用的状态通过对象树(对象树)的形式存储在商店里面。
这个定义十分抽象其实就是把所有需要共享的数据通过javascript对象的形式存储下来

state ={ 　　,,,用途:& # 39;angular 应用# 39; 　　,,,shoppingList:[& # 39;苹果# 39;,,& # 39;梨# 39;】 　　} <李>

状态是只读的(状态只能是只读形式)

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

状态={& # 39;用户名# 39;:& # 39;kat # 39;},//用户重新登录别的账户为汤姆=state.username  & # 39;汤姆# 39;,,//在ngrx  store 这个行为是绝对不允许的 <李>

变化是由纯函数(只能通过调用函数来改变状态)

由于不能直接需改状态,ngrx/存储同时引入了一个叫做减速机(聚合器)的概念。通过减速器来修改状态。

function 减速器(=state  & # 39; SHOW_ALL& # 39;,,动作),{ 　　,,,switch  (action.type), { 　　,,,,,case  & # 39; SET_VISIBILITY_FILTER& # 39;: 　　,,,,,,,return  Object.assign ({}, state ,, newObj);,, 　　,,,,,,,默认值: 　　,,,,,,,return  state , 　　,,,,,,,} 　　}

<强> ngrx/商店使用实例

<强> 1。安装@ngrx/存储

yarn  add  @ngrx/存储

<强> 2。创建州,行动,减速器

<强>状态状态:

应用程序商店\ \状态。ts 

//, reducer.ts,一般需要将状态,行动,减速机进行文件拆分
　　{},Action  import 得到& # 39;@ngrx/商店# 39;;
　　
　　时间=export  const  INCREMENT  & # 39;增量# 39;;
　　时间=export  const  DECREMENT  & # 39;衰减# 39;;
　　时间=export  const  RESET  & # 39;重置# 39;;
　　
　　const  initialState =, 0;//,减速器定义了行动被派发时状态的具体改变方式
　　export  function  counterReducer(状态:,number =, initialState,,行动,行动),{
　　switch 才能;(action.type), {
　　,,,case 增量:
　　,,,,,return  state  +, 1;
　　
　　,,,case 递减:
　　,,,,,return  state 作用;1;
　　
　　,,,case 重置:
　　,,,,,return  0;
　　
　　,,,默认值:
　　,,,,,return 状态;
　　,,}
　　}
角中如何使用ngrx做状态管理