Angular Ngrx Store Effect 和 Action 的交互流程

简介: Angular Ngrx Store Effect 和 Action 的交互流程

我们可以使用 Meta Reducer 即高阶 Reducer 的概念。

下面是一个典型的例子:Logger Meta Reducer.

该高阶 Reducer 在真实的归约器执行之前添加一些日志消息:

export function logger(reducer:
    ActionReducer<AppState>): ActionReducer<AppState> {
        return (state: AppState, action: any): AppState => {
            console.log('state', state);
            console.log('action', action);
            return reducer(state, action);
        };
    }

logger 的输入是一个 reducer,返回一个新的与输入的 reducer 具有完全相同的签名的新 reducer,且在这个新的 reducer 里,会首先执行日志记录操作。这有点像 Java 里的面向切片编程技术(AOP).


所示的 logger() 元归约器函数接受 ActionReducer 类型的输入参数(即纯函数或归约器),并且还返回 ActionReducer 类型的函数。 返回的函数在返回包装的减速器之前将状态和操作变量记录到控制台。


回到 App Module 代码,定义一组 ModuleWithProviders 类来包装 StoreDevtoolsModule.instrument() 方法,以便稍后在 App Module 上导入它。

export const storeDevTools:
ModuleWithProviders[] =
    !environment.production ? [StoreDevtoolsModule.instrument()] : [];

最后,将上述的 ModuleWithProviders 导入 App Module:

StoreModule.forRoot((reducers) as any,
        { metaReducers }),
EffectsModule.forRoot(effects),
storeDevTools,

实际上,StoreModule.forRoot() 方法还可以接收第二个参数,类型为 StoreConfig interface:

export declare type StoreConfig<T,
    V extends Action = Action> = {
        initialState?: InitialState<T>;
        reducerFactory?: ActionReducerFactory<T, V>;
        metaReducers?: MetaReducer<T, V>[];

Store Side-Effect

将 Action 分派到 Store 的代码有时会导致一些副作用(Side Effect)。 例如,调度一个动作来将所有Hero 数据加载到应用程序中。 这样的操作会导致必须通过 Angular 服务与托管在服务器端(或云)上的 Web API 进行通信以返回英雄数据的 Side-Effect。 将操作分派到 Store 的代码的这种 Side-Effect,会导致与外部服务的通信。


Ngrx/effects 模块将副作用与容器组件隔离开来,并提供了一个简洁的解决方案来在支持 NgRX Store 的 Angular 应用程序中处理它们。 Ngrx/store 模块向 Store 发送一个操作,以传递从服务器检索到的任何结果或数据。

上图的交互场景概述如下:

  • ngrx/effects 模块监听分发到 Store 的动作。

如果有一个 Effect 被钩住来监听一个分派的动作,这个 Effect 就会运行并执行。

一旦 Effect 从服务器端接收到数据,它就会向 Store 发送一个新的 action,以便 reducer 启动并处理从 Effect 接收到的数据并相应地更新状态。


相关文章
|
7月前
|
存储 API 网络架构
Angular Ngrx Store 应用程序状态的一些典型例子
Angular Ngrx Store 应用程序状态的一些典型例子
37 0
|
7月前
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
56 0
|
3月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
45 0
|
5月前
|
JavaScript UED SEO
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
31 1
|
7月前
|
JavaScript 前端开发 调度
Angular Ngrx 里 Store 和 State 的关系
Angular Ngrx 里 Store 和 State 的关系
60 0
|
7月前
|
SQL 数据库
Angular Ngrx store 里的 Selector 介绍
Angular Ngrx store 里的 Selector 介绍
46 0
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2
|
3月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0
|
21天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
3月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
40 1

热门文章

最新文章