Angular数据状态管理框架:NgRx/Store

简介: ngrx/store 是基于RxJS的状态管理库,其灵感来源于Redux。在NgRx中,状态是由一个包含action和reducer的函数的映射组成的。Reducer函数经由action的分发以及当前或初始的状态而被调用,最后由reducer返回一个不可变的状态。

ngrx/store 是基于RxJS的状态管理库,其灵感来源于Redux。在NgRx中,状态是由一个包含actionreducer的函数的映射组成的。Reducer函数经由action的分发以及当前或初始的状态而被调用,最后由reducer返回一个不可变的状态。

image.png

状态管理

在前端大型复杂Angular/AngularJS项目的状态管理一直是个让人头疼的问题。在AngularJS(1.x版本)中,状态管理通常由服务,事件,$rootScope混合处理。在Angular中(2+版本),组件通信让状态管理变得清晰一些,但还是有点复杂,根据数据流向不同会用到很多方法。

ngrx/store中的基本原则

视图层通过dispatch发起一个行为(action)、Reducer接收action,根据action.type类型来判断执行、改变状态、返回一个新的状态给store、由store更新state

image.png

  • State(状态) 是状态(state)存储器
  • Action(行为) 描述状态的变化
  • Reducer(归约器/归约函数) 根据先前状态以及当前行为来计算出新的状态,里面的方法为纯函数
  • 状态用State的可观察对象,Action的观察者——Store来访问

Actions(行为)

Actions是信息的载体,它发送数据到reducer,然后reducer更新storeActionsstore能接受数据的唯一方式。

ngrx/store里,Action的接口是这样的:

// actions包括行为类型和对应的数据载体
export interface Action {
  type: string;
  payload?: any;
}

type描述期待的状态变化类型。比如,添加待办 ADD_TODO,增加 DECREMENT 等。payload是发送到待更新store中的数据。store派发action 的代码类似如下:

// 派发action,从而更新store
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Buy milk'
});

Reducers(归约器)

Reducers规定了行为对应的具体状态变化。是纯函数,通过接收前一个状态和派发行为返回新对象作为下一个状态的方式来改变状态,新对象通常用Object.assign和扩展语法来实现。

// reducer定义了action被派发时state的具体改变方式
export const todoReducer = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

开发时特别要注意函数的纯性。因为纯函数:

  • 不会改变它作用域外的状态
  • 输出只决定于输入
  • 相同输入,总是得到相同输出

Store(存储)

store中储存了应用中所有的不可变状态。ngrx/store中的storeRxJS状态的可观察对象,以及行为的观察者。

可以利用Store来派发行为。也可以用Store的select()方法获取可观察对象,然后订阅观察,在状态变化之后做出反应。

上面我们描述的是基本流程。在实际开发过程中,会涉及API请求、浏览器存储等异步操作,就需要effectsserviceseffectsaction触发,进行一些列逻辑后发出一个或者多个需要添加到队列的action,再由reducers处理。

image.png

使用ngrx/store框架开发应用,始终只维护一个状态,并减少对API的调用。

简单示例

简单介绍一个管理系统的登录模块。

创建Form表单

  1. 增加组件:LoginComponent,主要就是布局,代码为组件逻辑
  2. 定义用户:User Model
export class User {
    id: number;
    username: string;
    password: string;
    email: string;
    avatar: string;
    clear(): void {
        this.id = undefined;
        this.username = "";
        this.password = "";
        this.email = "";
        this.avatar = "./assets/default.jpg";
    }
}
  1. 添加表单:在组件LoginComponent增加Form表单

NGRX Store

按照上述的4个原则定义相应的Actions

image.png

  • reducers定义状态
    在文件auth.reducers.ts中创建状态,并初始化
export interface AuthState {
    isAuthenticated: boolean;
    user: User | null;
    errorMessage: string | null;
}
export const initialAuthState: AuthState = {
    isAuthenticated: false,
    user: null,
    errorMessage: null
};
  • actions定义行为
export enum AuthActionTypes {
    Login = "[Auth] Login",
    LoginSuccess = "[Auth] Login Success",
    LoginFailure = "[Auth] Login Failure"
}
export class Login implements Action {
    readonly type = AuthActionTypes.Login;
    constructor(public payload: any) {}
}
  • service实现数据交互(服务器)
@Injectable()
export class AuthService {
    private BASE_URL = "api/user";
    constructor(private http: HttpClient) {}
    getToken(): string {
        return localStorage.getItem("token");
    }
    login(email: string, pwd: string): Observable<any> {
        const url = `${this.BASE_URL}/login`;
        return this.http.post<User>(url, { email, pwd });
    }
}
  • effects侦听从Store调度的动作,执行某些逻辑,然后分派新动作
  • 一般情况下只在这里调用API
  • 通过返回一个action给reducer进行操作来改变store的状态
  • effects总是返回一个或多个action(除非@Effect with {dispatch: false})
  • image.png
@Effect()
Login: Observable<any> = this.actions.pipe(
    ofType(AuthActionTypes.Login),   //执行Login响应
    map((action: Login) => action.payload),
    switchMap(payload => {
        return this.authService.login(payload.email, payload.password).pipe(
            map(user => {
                return new LoginSuccess({ uid: user.id, email: payload.email });
            }),
            catchError(error => {
                return of(new LoginFailure(error));
            })
        );
    })
);
//失败的效果
@Effect({ dispatch: false })
LoginFailure: Observable<any> = this.actions.pipe(ofType(AuthActionTypes.LoginFailure));
//成功的效果
@Effect({ dispatch: false })
LoginSuccess: Observable<any> = this.actions.pipe(
    ofType(AuthActionTypes.LoginSuccess),
    tap(user => {
        localStorage.setItem("uid", user.payload.id);
        this.router.navigateByUrl("/sample");
    })
);


相关文章
|
9天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
25 4
|
5月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
|
2月前
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
105 6
|
2月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
51 0
|
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月前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
32 0
|
2月前
|
前端开发 UED 开发者
无障碍设计的魔法:JSF让每个用户都能畅游数字世界!
【8月更文挑战第31天】本文介绍如何使用JavaServer Faces (JSF)构建无障碍Web应用,确保所有用户都能访问和使用。文章通过实际代码示例展示了如何利用ARIA属性增强组件、实现键盘导航、提供文本替代以及使用语义化标签等技术。无障碍设计不仅是道德责任,也是提升用户体验的关键。通过这些方法,JSF可以帮助开发者创建更加公平和包容的应用。
27 0
|
2月前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
33 0
|
2月前
|
开发者 缓存 数据库
【性能奇迹】Wicket应用的极速重生:揭秘那些让开发者心跳加速的调优秘技!
【8月更文挑战第31天】在软件开发中,性能优化是确保应用快速响应和高效运行的关键。本书《性能调优:Apache Wicket应用的速度提升秘籍》详细介绍了如何优化Apache Wicket应用,包括代码优化、资源管理、数据库查询优化、缓存策略及服务器配置等方面。通过减少不必要的组件渲染、优化SQL查询、使用缓存和调整服务器设置等方法,本书帮助开发者显著提升Wicket应用的性能,确保其在高并发和数据密集型场景下的稳定性和响应速度。
36 0
|
2月前
|
JavaScript 前端开发 开发者
深入解析Angular装饰器:揭秘框架核心机制与应用——从基础用法到内部原理的全面教程
【8月更文挑战第31天】本文深入解析了Angular框架中的装饰器特性,包括其基本概念、使用方法及内部机制。装饰器作为TypeScript的关键特性,在Angular中用于定义组件、服务等。通过具体示例介绍了`@Component`和`@Injectable`装饰器的应用,展示了如何利用装饰器优化代码结构与依赖注入,帮助开发者构建高效、可维护的应用。
24 0
下一篇
无影云桌面