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 接收到的数据并相应地更新状态。


相关文章
|
存储 API 网络架构
Angular Ngrx Store 应用程序状态的一些典型例子
Angular Ngrx Store 应用程序状态的一些典型例子
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
37 0
|
2月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
38 0
|
2月前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
33 0
|
2月前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
32 0
|
5月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
|
11月前
|
JavaScript UED SEO
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
|
22天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
37 0
|
2月前
|
开发者 Java 开发框架
JSF与EJB,打造企业级应用的神器!让你的Web应用更加稳定、高效!
【8月更文挑战第31天】在现代企业级应用开发中,JSF(JavaServer Faces)与EJB(Enterprise JavaBeans)是两大核心技术。JSF作为一款基于Java的Web应用框架,以其丰富的UI组件和表单处理功能著称;EJB则专注于提供分布式事务处理及远程调用等企业级服务。两者的结合为企业应用带来了高效便捷的开发模式。下文将通过一个简单的示例展示如何利用JSF进行用户信息的输入与保存,并借助EJB实现相关业务逻辑。尽管这一组合具有明显优势,但在实际应用中还需考虑其局限性并作出合理选择。
43 0
下一篇
无影云桌面