Angular之store全局状态管理浅学

🕗 发布于 2024-07-20 09:00 angular.js javascript 前端 angular

在 Angular 应用中，我们可以使用 @ngrx/store 进行状态管理可以有效地管理和跟踪应用程序的状态变化。@ngrx/store 是基于 Redux 模式的状态管理库，它提供了一种集中式存储管理应用程序状态的方式。以下是关于 @ngrx/store 的详细解释和使用方法：

前言

@ngrx/store 提供了一种强大的机制来管理 Angular 应用程序的状态，使得应用程序的状态变化变得可预测和可追踪。通过定义 actions、reducers 和 selectors，并使用 select 函数来订阅状态变化，我们可以实现高效的状态管理，同时提高应用程序的可维护性和可测试性。同时，结合 Effects 可以处理复杂的异步逻辑，使得应用程序的状态管理更加完善和健壮。

1. 核心概念

1.1. Store

Store是整个应用程序状态的单一来源。它是一个 RxJS Observable，用于订阅状态的变化。通过 Store，我们可以获取、更新和订阅应用程序中的状态。

1.2. State

State 是应用程序的当前状态，通常表示为一个 JavaScript 对象。在 @ngrx/store 中，所有的状态都被组织成一个状态树，每个部分状态（或称为状态片段）都由一个 reducer 函数管理。

1.3. Actions

Actions 是一个描述状态变化的简单对象，它包含了一个 type属性和可选的playload属性。通过 dispatching actions，我们可以触发状态的变化。

1.4. Reducers

Reducers是纯函数，它接收当前状态和一个 action，并返回新的状态。Reducers 用于处理不同类型的 actions，更新相应的部分状态。

2. 安装和配置 @ngrx/store

2.1. 安装 @ngrx/store

npm install @ngrx/store --save

2.2. 在 Angular 应用中配置 `StoreModule`

在 Angular 的根模块（通常是 AppModule）中导入 StoreModule.forRoot()，并传入一个包含所有 reducers 的对象。

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers'; // 导入应用程序的 reducers

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      }
    })
  ],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

reducers是一个对象，包含了应用程序的所有 reducer 函数。
metaReducers是一些处理 reducer 的高阶函数，例如日志记录、状态恢复等。
runtimeChecks是一个可选配置对象，用于开启严格的状态和 action 不可变性检查。

3. 创建和使用 Actions、Reducers 和 State

3.1. 定义 Actions

// user.actions.ts
import { createAction, props } from '@ngrx/store';
import { User } from './user.model';

export const setUser = createAction('[User] Set User', props<{ user: User }>());

export const clearUser = createAction('[User] Clear User');

3.2. 创建 Reducers

// user.reducer.ts
import { Action, createReducer, on } from '@ngrx/store';
import { User } from './user.model';
import * as UserActions from './user.actions';

export interface UserState {
  user: User | null;
}

export const initialState: UserState = {
  user: null,
};

const userReducer = createReducer(
  initialState,
  on(UserActions.setUser, (state, { user }) => ({ ...state, user })),
  on(UserActions.clearUser, (state) => ({ ...state, user: null })),
);

export function reducer(state: UserState | undefined, action: Action) {
  return userReducer(state, action);
}

3.3. 使用 State 和 Dispatch Actions

// user.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './app.state'; // 应用状态的类型定义
import { setUser, clearUser } from './store/user/user.actions'; // Actions 的导入

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {

  constructor(private store: Store<AppState>) { }

  setUser(): void {
    const user = { id: '1', name: 'John Doe', email: 'john.doe@example.com' };
    this.store.dispatch(setUser({ user }));
  }

  clearUser(): void {
    this.store.dispatch(clearUser());
  }

}

4. 在组件中使用 `select` 函数获取状态

4.1. 定义选择器函数

// user.selector.ts
import { createSelector, createFeatureSelector } from '@ngrx/store';
import { AppState } from '../../app.state'; // 应用状态的类型定义
import { UserState } from './user.reducer'; // 用户状态的类型定义

// 创建特性选择器，用于选择用户状态
export const selectUserState = createFeatureSelector<AppState, UserState>('user');

// 创建选择器函数，用于选择用户信息
export const getUser = createSelector(
  selectUserState,
  (state: UserState) => state.user
);

4.2. 在组件中使用 `select` 函数订阅状态

// user.component.ts
import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { AppState } from './app.state'; // 应用状态的类型定义
import { Observable } from 'rxjs';
import { getUser } from './store/user/user.selector'; // 选择器函数的导入
import { User } from './store/user/user.model'; // 用户模型的导入

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user$: Observable<User>; // 声明一个可观察对象，用来订阅用户状态

  constructor(private store: Store<AppState>) { }

  ngOnInit(): void {
    this.user$ = this.store.pipe(select(getUser)); // 使用 select 函数选择用户状态
  }
}

4.3. 在模板中使用 Async 管道订阅状态

<!-- user.component.html -->
<div *ngIf="user$ | async as user">
  <p>User Name: {{ user.name }}</p>
  <p>User Email: {{ user.email }}</p>
</div>

5. 异步状态管理

对于异步操作（如 HTTP 请求），可以使用 Effects，它允许我们在响应 action 时执行副作用，并将结果作为新的 action 分发到 store 中。这样可以保持 reducer 函数的纯粹性。

6. forFeature方法

在 @ngrx/store 中，forFeature 方法是用来在特性模块中注册和配置状态的一种重要方式。特性模块可以理解为应用程序中的一个子模块，它可能包含了相关的业务逻辑、状态管理和视图组件。使用 forFeature 可以使得特性模块中的状态管理更加模块化和独立，同时能够与全局状态进行合理的整合。

使用场景和示例

1. 在特性模块中注册状态

假设我们有一个应用程序，其中有一个特性模块管理用户信息的状态。我们可以使用 forFeature 来注册并配置该特性模块的状态。

// user.reducer.ts
import { Action, createReducer, on } from '@ngrx/store';
import { User } from './user.model';
import * as UserActions from './user.actions';

export interface UserState {
  user: User | null;
}

export const initialState: UserState = {
  user: null,
};

const userReducer = createReducer(
  initialState,
  on(UserActions.setUser, (state, { user }) => ({ ...state, user })),
  on(UserActions.clearUser, (state) => ({ ...state, user: null })),
);

export function reducer(state: UserState | undefined, action: Action) {
  return userReducer(state, action);
}

2. 在特性模块中使用 `forFeature`

在特性模块中，我们需要导入 StoreModule 和相应的 reducer 函数，并使用 forFeature 来注册该特性模块的状态。

// user.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { reducer } from './user.reducer'; // 导入用户特性模块的 reducer

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    StoreModule.forFeature('user', reducer), // 使用 forFeature 注册用户特性模块的状态
  ],
})
export class UserModule { }

详细解释

Reducer 定义

在 user.reducer.ts 中定义了一个用户特性模块的 reducer 函数，它负责管理用户信息的状态变化。这里的 initialState 定义了初始的状态对象，userReducer 使用 createReducer 函数来处理不同类型的 action，并更新相应的状态。
特性模块中的 StoreModule.forFeature

在 UserModule 中，我们使用 StoreModule.forFeature 方法来注册用户特性模块的状态。forFeature 方法接收两个参数：
- 第一个参数是一个字符串，用来标识注册的状态在全局状态树中的位置。在这里我们使用 user，表示用户特性模块的状态将会存储在全局状态树的 user 键下。
- 第二个参数是特性模块的 reducer 函数，用来管理特性模块中的状态变化。
在应用中使用特性模块

在主模块或其他需要使用用户特性模块的地方，只需导入 UserModule，Angular 就会自动注册和配置该模块的状态。

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers'; // 导入应用程序的 reducers
import { UserModule } from './user/user.module'; // 导入用户特性模块

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    UserModule, // 导入并使用用户特性模块
  ],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

优势和适用场景

模块化：使用 forFeature 可以使得状态管理更加模块化，每个特性模块可以独立管理自己的状态和逻辑，提高了代码的可维护性和可重用性。
分割状态：通过注册不同的特性模块，可以将全局状态树分割为多个小块，使得状态管理更加清晰和灵活。
依赖注入：Angular 的依赖注入机制能够有效地管理特性模块的依赖关系，使得状态的使用和管理更加一致和可控。

参考博文

https://blog.51cto.com/devpoint/4925185

Angular Ngrx 里 Store 和 State 的关系-阿里云开发者社区

原文地址：https://blog.csdn.net/qq_44327851/article/details/140524783

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：全景分割动态视觉slam
下一篇：Python解析ARXML文件结构：按照有效Text文本提取节点信息

PL/SQL执行.sql文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/iamlzyoco/article/det
阅读更多2024-11-14
PyAEDT：Ansys Electronics Desktop API 简介
在本文中，我将向您介绍 PyAEDT，这是一个 Python 库，旨在增强您对 Ansys Electronics Desktop 或 AEDT 的体验。通过利用 PyAADT 的强大功能，您可以将分
阅读更多2024-11-14
Python从0到100（七十二）：Python OpenCV-OpenCV实现手势音量控制（文末送书）
本次实验需要使用OpenCV和mediapipe库进行手势识别，并利用手势距离控制电脑音量。cv2：OpenCV库，用于读取摄像头视频流和图像处理。mediapipe：mediapipe库，用于手部关
阅读更多2024-11-14
YOLOv11多模态结合CFT模块融合可见光+红外光双输入
这期是在上期YOLOv10的基础上，使用YOLOv11结合Transformer复现了论文《Cross-Modality Fusion Transformer for Multispectral Ob
阅读更多2024-11-14
鸿蒙学习生态应用开发能力全景图-三方库（3）
鸿蒙生态三方库，是在鸿蒙系统上可重复使用的软件库，可帮助开发者重用技术资产，快速开发鸿蒙生态应用、元服务，提升开发效率。鸿蒙生态中心仓聚合了丰富的鸿蒙生态开发三方库，方便开发者一站式获取。 C/C+
阅读更多2024-11-14
android studio新建activity提示 require androidX support
在Android Studio中创建Activity时出现的“require androidX support”提示通常意味着你的项目配置需要使用AndroidX库来支持。AndroidX是原Andr
阅读更多2024-11-14
Brave127编译指南 Windows篇：部署depot_tools（三）
在下一篇文章《Brave127编译指南 Windows篇：配置Git（四）》中，我们将详细讲解如何在Windows系统上安装和配置Git，为您的开发工作提供全面的版本控制支持。在Brave浏览器的编译
阅读更多2024-11-14
去地面算法——depth_clustering算法调试（1）
depth_clustering算法调试
阅读更多2024-11-14
网络安全与零信任架构：构建新一代信息保护体系
作为一种全新的网络安全理念，零信任架构（Zero Trust Architecture, ZTA）重新定义了信息保护的方式，强调对所有访问请求的验证与监控，以实现更高的安全性。而零信任架构是当前网络安
阅读更多2024-11-14
【3D Slicer】的小白入门使用指南四
● 开放解剖（OA）浏览器是由神经影像分析中心开发的，基于网络浏览器技术构建的图谱查看器。● OA浏览器将解剖模型和分割图像与语义信息结合起来。本教程提供了对OA浏览器技术的介绍。本教程中的示例基于S
阅读更多2024-11-14

Angular之store全局状态管理 浅学

前言