angular ngrx进阶effect

ngrx github地址 https://github.com/ngrx/platform

里面有一个的例子

ngrx是有几个概念 store state reducer effect action 关于store state reducer action的例子网上也不少但effect的介绍还没有看到中文版的。

state是一个有语义的全局数据, state中还可以有state 一个state可以表示一个页面中的全局数据。

store的结构是不可直接修改的一个结点为state的树，，

reducer 在angular中store是一个Observable 这意味着你可以在多个页面中订阅store中的数据（某一个state），当store中的某些state改变时，所有订阅这些数据的页面都将改变。但是这些页面中订阅出来的数据不要直接修改（要将他们视为'不可修改的对象'，防止不清楚这个数据在哪个步骤被修改，导致没有办法维护），应该发送显示的action去修改store中的某个数据，这个修改的过程叫reducer，一般一个state对应一个reducer。如果没有使用 ngrx-store-freeze依赖的话页面中订阅的数据是可以直接修改的，为了避免直接修改订阅出来的数据引入依赖ngrx-store-freeze

StoreModule.forRoot(reducers, {metaReducers})

export const metaReducers: MetaReducer<State>[] = environment.production ? [] : [storeFreeze];

使用上面俩行的做用是在非生产模式运行时会冻结store中的数据在修改订阅出的数据时会显示的抛出异常。想修改store中的数据只能通过发送action修改

effect是可以监听action的一个流，可以通过pipe做一些逻辑处理，如发送http请求，也可以把流中的数据转换成其他的action(如http请求发送完返回成功的请求成功的action) 在发送到reducer ,主要用到rxjx pipe(通道)中的管道符(map, switchMap, tap)，需要注意的是一个action被发送会先走reducer在走effect，当然也果没有对就action的reducer 就直接走对就的effect

例如 qq应用中给好友发送消息发送的消息会通过http发送请求然后把响应回的消息回显到页面 http请求需要一些时间。对用户的体验不是最佳的。

发送一个发送消息的action 先通过reducer对添加一个消息（可以标记这个数据是发送中的数据）到本地消息列表(一个State)页面中订阅这个state的页面会先回显出来显示给用户就是消息列表多一条正在发送中的数据，effect监听这个action 并发送一个http请求返回响应结果在相应的发送一个成功的action 到reducer接收成功的action，修改那条发送中的数据，状态为发送成功，页面回显的消息列表中消息为发送成功。

优点，action集中管理 reducer集中管理, effect集中管理，组件层中只显示的发送action和订阅state在页面回显数据，组件的功能单一不做过多的逻辑处理，在reducer中做本地store的修改可以清楚的看到有哪些action可以修改store, effect中做业务处理主要应用 rxjs中的管道符(很强大)，可以清楚的看到哪些action可以发送了http请求，方便后期维护和修改。

angular ngrx进阶effect相关推荐

Angular Ngrx store 里的 Selector 介绍
选择器是纯函数,它将状态切片(State slice)作为输入参数,并返回组件可以使用的状态数据切片(这些切片包含真正的业务数据). 正如数据库有自己的 SQL 查询语言一样,Ngrx/store 模 ...
Angular NgRx MemoizedSelector的类型定义学习
源代码位置: export interface MemoizedSelector<State, Result, ProjectorFn = DefaultProjectorFn<Resul ...
@ngrx入坑angular的schema，爽的一逼！
安装schematics工具 yarn add @ngrx/schematics --dev yarn add ngrx-store-freeze --dev 复制代码安装包 yarn add @n ...
ngrx Effect学习笔记
SAP Spartacus的connector通过NgRx的Effect从SAP Commerce Cloud后台取数据. 官网地址:https://ngrx.io/guide/effects Eff ...
angular 常用指令的使用
<!DOCTYPE html> <html> <head><title>angular js进阶</title><meta chars ...
【第二届青训营-寒假前端场】- 「构建Webpack知识体系」笔记
本节课重点内容什么是Webpack Webpack打包核心流程示例步骤关键配置项(如何使用?) 使用Webpack处理CSS/less等思考题使用Webpack接入Babel 思考题使用 ...
在同一基准下对前端框架进行比较（2019年更新）
翻译:疯狂的技术宅 medium.freecodecamp.org/a-realworld- 这是我们第三次用 Real World example apps 对前端框架进行比较. RealWorld ...
框架对比_2020 年前端框架性能对比和评测
我们又来做这个对比了.这次是 2020 年的版本,还有之前的版本: 2019 年. 2018 年. 2017 年. 先来明确一点--这篇文章绝对不是为了告诉你该选择哪个前端框架而写的.它只是一个小型而 ...
2020排行榜！Realworld前端框架的比较
全文共1500字,预计学习时长6分钟图源:unsplash 过去的三年我们都探讨了这个话题,那么今年的情况会是怎样呢? 首先声明,此文并不是关于未来前端选择的比较,而是从三个方面(性能,大小,相似应 ...

angular ngrx进阶effect

angular ngrx进阶effect相关推荐

最新文章

热门文章