ngx store -- 架构和作用

283 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

NgRx Store

官网地址:ngrx.io/

Store作用:

官方解释:

sotre 是一个数据状态管理容器,旨在帮助在Angular之上编写高性能,一致性的应用程序。

本方理解:

store 就是一个前端缓存框架,跟后端的交互通过effect 进行,他只把跟后端的交互作为数据来源的一种,重心在前端缓存的数据的在前端的如何变化,他所有的数据全部在store这个大对象中存着

图示可见:

image.png

例子

抽象的东西要结合具体的例子来理解: 结合计数器的例子理解下吧: 主要是通过store来实现计数功能

1, action 有几种可做的行为:加, 减, 重置.

2, reducer 为纯函数, 用来计算出新的状态 : 是加1, 还是减1,还是归零

3, sotre 两个角色,既是包裹着state的可观察对象,又是action的观察者

//observer   调用加1方法
this.store.dispatch(new Increment());
//observable 获取现在的值
this.count$ = store.pipe(select('count'));

源代码在:stackblitz.com/edit/ngrx-s…