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请求，方便后期维护 和修改。