超级会员免费看
深入理解ngrx：管理Angular应用状态的利器
1. Redux架构与Reducer
Reducer是一个纯函数，它规定了状态应该如何改变。它不会改变当前状态，而是创建一个新的（更新后的）状态版本。状态对象是不可变的，Reducer会创建状态对象的副本并返回一个新的引用。从Angular的角度来看，这是一个绑定更改事件，所有关注方都会立即知道状态已更改，而无需在整个状态树中进行昂贵的值检查。
- Reducer函数签名 ：
function (previousState, action): State {...}
- Reducer的职责 ：Reducer的目的是更新并返回应用状态，而不是实现像下单这样需要与外部服务交互的应用功能。因为实现应用逻辑会与Reducer外部的环境进行交互，从而产生副作用，而纯函数不能有副作用。不过，Reducer可以实现与状态更改相关的最小应用逻辑。
2. 单一状态存储的重要性
在一个为大型汽车制造商开发的Web项目中，由于应用状态的存储方式不统一，导致实现新需求变得耗时且昂贵。该应用允许潜在买家从一千多个套餐和选项中选择来配置汽车，软件模块使用了多种技术开发。不同模块使用不同的方式存储当前用户选择，如URL参数、HTML数据属性、浏览器的本地和会话存储、Angular服务、React存储等。当有新需求时，实现一个看似简单的新功能可能会变成一项耗时且昂贵的任务。
因此，如果在开发新项目时，特别关注应用状态的实现方式，将有助于长期的项目维护。
3. 引入ngrx
ngrx是一个受Redux启发的库，可以将其视为在Angular应用中管理应用状态的Redux模式的实现。与Redux类似，它实现了单向数据流，并有存储（store）、动作（actions）和Reducer。它还利用了RxJS发送通知和订阅通知的能力。
- Redux的三个原则 ：
- 单一事实来源。
- 状态是只读的。
-
状态更改由纯函数完成。
-
ngrx中的状态访问 ：在ngrx中，应用状态通过Store服务进行访问，它既是状态的可观察对象，也是动作的观察者。Store类的声明如下：
class Store<T> extends Observable<T> implements Observer<Action>
4. 熟悉存储、动作和Reducer
以一个简单的计数器应用为例，展示如何使用ngrx。
- 未使用ngrx的计数器应用 ：
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
<p>The counter: {{counter}}</p>
`
})
export class AppComponent {
counter = 0;
increment() {
this.counter++;
}
decrement() {
this.counter--;
}
}
-
使用ngrx的步骤
：
1. 安装ngrx存储 ：
npm i @ngrx/store
- 定义动作类型 ：
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
- 创建Reducer函数 ：
import { Action } from '@ngrx/store';
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export function counterReducer(state = 0, action: Action) {
switch (action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state - 1;
default:
return state;
}
}
- 在根模块中配置Reducer ：
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {counterReducer} from "./reducer";
import {StoreModule} from "@ngrx/store";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({counterState: counterReducer})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
- 修改组件代码 ：
import {Component} from '@angular/core';
import {Observable} from "rxjs";
import {select, Store} from "@ngrx/store";
import {INCREMENT, DECREMENT} from "./reducer";
@Component({
selector: 'app-root',
template: `
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
<p>The counter: {{counter$ | async}}</p>
`
})
export class AppComponent {
counter$: Observable<number>;
constructor(private store: Store<any>) {
this.counter$ = store.select('counterState');
}
increment() {
this.store.dispatch({type: INCREMENT});
}
decrement() {
this.store.dispatch({type: DECREMENT});
}
}
5. 消除事件冒泡的需求
使用ngrx存储可以消除组件间通信时事件冒泡的需求。例如，组件7发出的数据需要在组件6中使用，如果使用共同的父组件进行组件间通信，需要通过一系列的事件发射和订阅来传递数据。而使用ngrx存储，组件7发出一个存储动作，组件6使用选择器接收它，无论视图中有多少级组件嵌套，这种简单的组件间通信模型都适用。
6. 熟悉效果（Effects）和选择器（Selectors）
Reducer是执行简单操作的纯函数，但需要在某个地方实现业务逻辑，如与服务交互、向服务器发出请求等，这就需要实现具有副作用的函数，这在效果类中完成。
- 效果的作用 ：效果是可注入的类，它们位于存储之外，用于实现具有副作用的功能，同时不破坏单向数据流。
- 添加效果到项目 ：
npm i @ngrx/effects
-
效果的工作流程 ：如果一个组件发出一个需要与外部资源通信的动作，该动作可以被效果对象捕获，效果对象会处理这个动作并向Reducer发出另一个动作。例如，一个效果可以从存储中接收LOAD_PRODUCTS动作，调用loadProducts()，当数据加载完成后，发出LOAD_PRODUCTS_SUCCESS或LOAD_PRODUCTS_FAILURE动作，Reducer会相应地更新状态。
-
效果类示例 ：
@Injectable()
export class MyEffects {
...
@Effect()
loadProducts$ = this.actions$
.pipe(ofType(LOAD_PRODUCTS),
.switchMap(this.productService.getProducts()))
...
}
在应用模块类中，需要为根模块添加EffectsModule.forRoot()，或为特性模块添加EffectsModule.forFeature()。
下面是一个简单的mermaid流程图，展示ngrx的数据流程：
graph LR
A[组件] -->|dispatch(action)| B[Store]
B -->|action| C[Reducer]
C -->|new state| B
B -->|select()| A
B -->|action| D[Effect]
D -->|action| C
D -->|service call| E[Angular服务]
E -->|data| D
综上所述，ngrx为Angular应用提供了一种强大而灵活的方式来管理应用状态，通过合理使用存储、动作、Reducer、效果和选择器，可以提高应用的可维护性和可扩展性。
深入理解ngrx：管理Angular应用状态的利器
7. ngrx的实际应用案例
以一个简单的计数器应用为例，我们可以看到ngrx在实际应用中的使用方式。但在实际开发中，应用场景往往更加复杂。下面我们来分析一个更具代表性的案例，假设我们正在开发一个电商应用，需要管理商品列表、购物车等状态。
- 定义动作类型 ：
const LOAD_PRODUCTS = 'LOAD_PRODUCTS';
const LOAD_PRODUCTS_SUCCESS = 'LOAD_PRODUCTS_SUCCESS';
const LOAD_PRODUCTS_FAILURE = 'LOAD_PRODUCTS_FAILURE';
const ADD_TO_CART = 'ADD_TO_CART';
- 创建Reducer函数 ：
import { Action } from '@ngrx/store';
export function productReducer(state = { products: [], loading: false }, action: Action) {
switch (action.type) {
case LOAD_PRODUCTS:
return { ...state, loading: true };
case LOAD_PRODUCTS_SUCCESS:
return { ...state, products: action.payload, loading: false };
case LOAD_PRODUCTS_FAILURE:
return { ...state, loading: false };
default:
return state;
}
}
export function cartReducer(state = { items: [] }, action: Action) {
switch (action.type) {
case ADD_TO_CART:
return { ...state, items: [...state.items, action.payload] };
default:
return state;
}
}
- 配置根模块 ：
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {productReducer, cartReducer} from "./reducer";
import {StoreModule} from "@ngrx/store";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ productState: productReducer, cartState: cartReducer })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
- 组件中使用 ：
import {Component} from '@angular/core';
import {Observable} from "rxjs";
import {select, Store} from "@ngrx/store";
import { LOAD_PRODUCTS, ADD_TO_CART } from "./reducer";
@Component({
selector: 'app-root',
template: `
<button (click)="loadProducts()">Load Products</button>
<ul>
<li *ngFor="let product of products$ | async">{{product.name}} <button (click)="addToCart(product)">Add to Cart</button></li>
</ul>
<h3>Cart Items: {{cartItems$ | async | json}}</h3>
`
})
export class AppComponent {
products$: Observable<any[]>;
cartItems$: Observable<any[]>;
constructor(private store: Store<any>) {
this.products$ = store.select('productState').pipe(select(state => state.products));
this.cartItems$ = store.select('cartState').pipe(select(state => state.items));
}
loadProducts() {
this.store.dispatch({ type: LOAD_PRODUCTS });
}
addToCart(product) {
this.store.dispatch({ type: ADD_TO_CART, payload: product });
}
}
8. ngrx与其他状态管理方案的对比
在Angular开发中，除了ngrx，还有其他一些状态管理方案，如Angular服务、RxJS等。下面我们通过一个表格来对比它们的优缺点：
| 状态管理方案 | 优点 | 缺点 |
|---|---|---|
| ngrx | 遵循单向数据流，易于调试和测试；有单一的事实来源，状态可预测；支持时间旅行调试 | 学习曲线较陡，代码量相对较大 |
| Angular服务 | 简单易用，适合小型项目；可以在组件间共享数据 | 缺乏统一的状态管理，容易导致状态不一致；调试和测试困难 |
| RxJS | 强大的异步处理能力，可实现复杂的数据流 | 需要对RxJS有深入理解；代码可读性可能较差 |
9. 总结
通过以上内容的介绍，我们深入了解了ngrx在Angular应用中的使用。ngrx为我们提供了一种强大而灵活的方式来管理应用状态，它遵循Redux的原则，通过存储、动作、Reducer、效果和选择器等概念，实现了单向数据流和可预测的状态管理。
- 核心概念总结 ：
- Reducer ：纯函数，用于更新和返回应用状态。
- Store ：单一的事实来源，用于存储应用状态。
- Actions ：描述状态变化的对象，是改变状态的唯一方式。
- Effects ：处理具有副作用的操作，如与外部服务交互。
-
Selectors ：用于从存储中选择特定的状态。
-
实际应用建议 ：
- 在开发新项目时，建议优先考虑使用ngrx来管理应用状态，尤其是在大型项目中，它可以提高应用的可维护性和可扩展性。
- 在使用ngrx时，要注意遵循其设计原则，如使用纯函数的Reducer、避免在Reducer中产生副作用等。
- 合理使用效果和选择器，将业务逻辑和状态选择分离，使代码更加清晰和易于维护。
下面是一个mermaid流程图，展示了ngrx的整体架构：
graph LR
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
A[组件]:::process -->|dispatch(action)| B[Store]:::process
B -->|action| C[Reducer]:::process
C -->|new state| B
B -->|select()| A
B -->|action| D[Effect]:::process
D -->|action| C
D -->|service call| E[Angular服务]:::process
E -->|data| D
F[选择器]:::process -->|select| B
总之，ngrx是一个非常强大的Angular状态管理库，通过合理使用它的各种特性，可以帮助我们构建出更加健壮、可维护的应用。
扫一扫
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
