技术博客
ngrx框架高效开发实践指南
ngrx框架高效开发实践指南
### 摘要
本文档旨在为使用ngrx框架的开发者提供一份详尽的风格指南。通过介绍一系列在开发过程中常用的技术方法，本指南致力于帮助开发者更高效地利用ngrx框架，实现最佳实践。无论是在状态管理的设计上，还是在组件间的交互处理中，遵循这些指导原则都将显著提升开发效率与代码质量。
### 关键词
ngrx框架, 风格指南, 技术方法, 高效开发, 最佳实践
## 一、ngrx框架概述及准备
### 1.1 理解ngrx框架的核心概念
ngrx框架是Angular生态系统中用于状态管理的一个强大工具。它基于Redux模式设计，旨在简化大型应用的状态管理过程。为了更好地利用ngrx框架，首先需要理解其核心概念。
- **状态（State）**：状态是应用数据的单一来源。在ngrx中，状态通常被组织成一个扁平化的对象结构，以便于管理和查询。
- **动作（Actions）**：动作是应用中发生的事件，它们触发状态的变化。每个动作都是一个简单的JavaScript对象，包含一个类型（type）字段来标识动作的种类。
- **reducers**：reducers是一组纯函数，负责根据当前状态和接收到的动作来计算新的状态。它们是无副作用的，并且必须保持纯粹，即只依赖于传入的状态和动作参数。
- **effects**：effects用于处理异步操作，如HTTP请求。当一个特定的动作被dispatch时，effects监听这些动作并执行相应的异步操作，之后可能还会dispatch新的动作来更新状态。
- **选择器（Selectors）**：选择器是从状态树中提取特定数据的函数。它们可以组合多个状态属性，以创建更复杂的数据视图。
理解这些核心概念对于有效地使用ngrx至关重要。它们构成了ngrx框架的基础，也是实现高效状态管理的关键。
### 1.2 ngrx框架的安装与配置
安装ngrx框架非常简单，可以通过npm命令轻松完成。以下是安装和配置的基本步骤：
1. **安装ngrx模块**：首先，需要安装ngrx/store、ngrx/effects等核心模块。可以通过运行以下命令来安装：
```bash
npm install @ngrx/store @ngrx/effects
```
2. **配置store**：接下来，在应用中配置store。这通常涉及到定义初始状态、创建reducers以及设置store模块。例如，在`app.module.ts`文件中添加以下代码：
```typescript
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { effectsMetadata } from '@ngrx/effects';
import { reducers, metaReducers } from './app.reducer';
import { AppEffects } from './app.effects';
@NgModule({
imports: [
StoreModule.forRoot(reducers, { metaReducers }),
EffectsModule.forRoot([AppEffects])
],
})
export class AppModule { }
```
3. **创建actions和reducers**：定义具体的actions和reducers，以处理应用中的业务逻辑。例如，可以创建一个名为`todos`的特性模块，并为其定义actions和reducers。
4. **使用effects处理异步操作**：如果应用中有需要处理异步操作的地方，可以使用effects来监听特定的动作，并执行相应的异步任务。
通过以上步骤，可以成功地在Angular项目中集成ngrx框架，并开始利用它来管理应用的状态。这些基本的安装和配置步骤为后续的开发工作奠定了坚实的基础。
## 二、ngrx核心组件的应用
### 2.1 Action的创建与使用
在ngrx框架中，Action是触发状态变化的核心机制。正确地创建和使用Action对于保持应用的一致性和可维护性至关重要。下面是一些关于如何创建和使用Action的最佳实践：
- **命名规范**：Action的类型应该使用大写字母表示，并且尽可能具体描述该Action的目的。例如，`ADD_TODO`、`REMOVE_TODO`等。
- **Payload的传递**：如果Action需要携带额外的信息（如新添加的Todo项），可以通过Action对象的`payload`属性来传递。例如：
```typescript
export const addTodo = createAction(
'[Todo Component] Add Todo',
props<{ title: string }>()
);
```
- **Dispatching Actions**：在组件或服务中，通过注入`Store`服务并调用`dispatch`方法来触发Action。例如：
```typescript
import { Store } from '@ngrx/store';
import * as TodosActions from '../store/todos.actions';
constructor(private store: Store) {}
onAddTodo(title: string) {
this.store.dispatch(TodosActions.addTodo({ title }));
}
```
通过遵循这些规则，可以确保Action的创建和使用既符合约定又易于理解和维护。
### 2.2 Reducer的编写规则
Reducers是处理状态变化的核心组件。编写清晰、可读性强的Reducer对于维护一个健壮的应用程序至关重要。以下是一些编写Reducer的最佳实践：
- **单一职责原则**：每个Reducer应该只负责处理一种类型的Action。这样可以确保每个Reducer的功能明确，易于测试和维护。
- **纯函数**：Reducers应该是纯函数，这意味着它们不修改外部状态，也不产生任何副作用。Reducer函数应该只依赖于传入的状态和Action参数。
- **默认状态**：在Reducer中总是提供一个默认状态，以确保即使没有初始状态，Reducer也能正常工作。
- **使用switch语句**：使用switch语句来处理不同的Action类型。这有助于保持代码的整洁和可读性。
```typescript
export function todosReducer(state = initialState, action: TodosActions.TodosActions) {
switch (action.type) {
case TodosActions.ADD_TODO:
return [...state, { id: state.length + 1, title: action.payload.title, completed: false }];
// 其他case...
default:
return state;
}
}
```
遵循这些规则可以帮助开发者编写出高效、可维护的Reducers。
### 2.3 Effect的合理应用
Effects是处理异步操作的关键组件。合理地使用Effects可以极大地提高应用的性能和用户体验。以下是一些关于如何合理应用Effects的最佳实践：
- **分离关注点**：将Effects与业务逻辑分离，确保Effects仅专注于处理异步操作。例如，可以创建一个专门的Effect来处理与服务器的通信。
- **错误处理**：在Effects中处理可能发生的错误情况，确保应用的稳定性和可靠性。
```typescript
@Effect()
loadTodos$: Observable<Action> = this.actions$.pipe(
ofType(TodosActions.LOAD_TODOS),
switchMap(() =>
this.todoService.loadTodos().pipe(
map(todos => new TodosActions.LoadTodosSuccess(todos)),
catchError(error => of(new TodosActions.LoadTodosFailure(error)))
)
)
);
```
- **避免过度使用Effects**：虽然Effects非常有用，但过度使用可能会导致代码变得难以维护。确保只在确实需要处理异步操作时才使用Effects。
通过遵循这些指导原则，开发者可以更加高效地使用ngrx框架，并实现最佳实践。
## 三、状态管理与异步操作
### 3.1 状态的正确管理
在使用ngrx框架进行状态管理时，正确的状态设计和管理方式对于保证应用的可扩展性和可维护性至关重要。以下是一些关于如何正确管理状态的最佳实践：
- **单一来源真相**：确保所有的状态都集中在一个地方管理，避免在组件之间直接传递状态。这样可以减少状态的复杂度，并使得状态的变更更容易追踪。
- **状态层次结构**：合理地组织状态层次结构，将相关的状态属性分组到一起。例如，可以将用户信息、待办事项列表等分别放在不同的特性模块中管理。
- **状态的初始化**：在应用启动时，确保所有状态都被正确初始化。可以通过在根模块中配置初始状态来实现这一点。
- **状态的更新**：使用Reducers来更新状态，确保状态的更新始终是通过Action触发的。避免直接修改状态，以保持状态的一致性和可预测性。
- **状态的持久化**：对于需要在会话间持久化保存的状态，可以考虑使用ngrx的`ngrx-store-localstorage`插件或其他存储解决方案。
通过遵循这些最佳实践，可以确保状态管理既高效又易于维护。
### 3.2 Selector的使用技巧
选择器（Selectors）是用于从状态树中提取特定数据的函数。合理地使用选择器不仅可以提高代码的可读性和可维护性，还可以提高应用的性能。以下是一些关于如何使用选择器的最佳实践：
- **组合选择器**：通过组合多个基础选择器来创建更复杂的选择器。这样可以减少重复代码，并使得选择器更加灵活。
```typescript
export const selectTodos = (state: AppState) => state.todos;
export const selectCompletedTodosCount = createSelector(
selectTodos,
(todos: Todo[]) => todos.filter(todo => todo.completed).length
);
```
- **性能优化**：选择器通过`createSelector`函数创建，该函数会缓存中间结果，只有当依赖的状态发生变化时才会重新计算。这有助于提高应用的性能。
- **选择器的命名**：选择器的命名应该清晰明了，便于其他开发者理解其用途。例如，`selectTodos`、`selectCompletedTodosCount`等。
通过合理地使用选择器，可以显著提高应用的性能，并使代码更加清晰易懂。
### 3.3 异步操作的优化策略
在处理异步操作时，合理的优化策略可以极大地提高应用的响应速度和用户体验。以下是一些关于如何优化异步操作的最佳实践：
- **使用Effects**：对于需要处理异步操作的情况，使用Effects来监听特定的Action，并执行相应的异步任务。例如，可以创建一个Effect来处理HTTP请求。
```typescript
@Effect()
loadTodos$: Observable<Action> = this.actions$.pipe(
ofType(TodosActions.LOAD_TODOS),
switchMap(() =>
this.todoService.loadTodos().pipe(
map(todos => new TodosActions.LoadTodosSuccess(todos)),
catchError(error => of(new TodosActions.LoadTodosFailure(error)))
)
)
);
```
- **错误处理**：在Effects中处理可能发生的错误情况，确保应用的稳定性和可靠性。例如，可以在Effects中捕获网络错误，并向用户显示友好的提示信息。
- **取消正在进行的操作**：对于长时间运行的异步操作，提供取消机制是非常重要的。例如，可以使用RxJS的`takeUntil`操作符来取消正在进行的HTTP请求。
```typescript
private destroy$ = new Subject<void>();
@Effect()
loadTodos$: Observable<Action> = this.actions$.pipe(
ofType(TodosActions.LOAD_TODOS),
switchMap(() =>
this.todoService.loadTodos().pipe(
takeUntil(this.destroy$),
map(todos => new TodosActions.LoadTodosSuccess(todos)),
catchError(error => of(new TodosActions.LoadTodosFailure(error)))
)
)
);
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
```
通过遵循这些优化策略，可以确保应用在处理异步操作时既高效又稳定。
## 四、代码组织与重构
### 4.1 模块化的设计方法
模块化设计是现代软件工程中的一个重要概念，特别是在使用ngrx框架进行状态管理时尤为重要。模块化不仅有助于提高代码的可读性和可维护性，还能促进团队协作，使得大型项目的开发变得更加高效。以下是一些关于如何在ngrx框架中实施模块化设计的最佳实践：
- **特性模块**：将应用的不同功能区域划分为独立的特性模块。每个特性模块都应该包含与之相关的状态、actions、reducers和effects。例如，可以为待办事项功能创建一个名为`todos`的特性模块。
- **共享状态**：对于需要跨多个特性模块共享的状态，可以创建一个单独的特性模块来管理这些共享状态。这样可以避免状态的重复定义，并确保状态的一致性。
- **模块间通信**：通过actions和effects来实现不同特性模块之间的通信。例如，一个特性模块可以dispatch一个action来通知另一个特性模块更新状态。
- **动态加载模块**：对于大型应用，可以考虑使用Angular的懒加载特性来动态加载特性模块。这样可以减少初始加载时间，提高应用性能。
通过采用模块化的设计方法，可以确保应用结构清晰、易于扩展，并且便于团队成员之间的协作。
### 4.2 代码的组织与重构技巧
随着项目的不断演进，代码的组织和重构成为保持代码质量和可维护性的关键。以下是一些关于如何在ngrx框架中组织和重构代码的最佳实践：
- **代码分离**：将actions、reducers和effects分别放在各自的文件夹中。这种做法有助于保持代码的清晰和有序，同时也方便查找和维护。
- **重构Reducer**：当发现Reducer变得过于复杂时，可以考虑将其拆分成更小的Reducer。这样不仅可以提高代码的可读性，还可以使测试变得更加容易。
- **重构Effects**：对于复杂的Effects，可以考虑使用RxJS操作符来简化代码。例如，使用`mergeMap`代替`switchMap`来处理并发请求，或者使用`debounceTime`来过滤快速连续触发的事件。
- **重构Selector**：当选择器变得过于复杂时，可以考虑将其拆分成多个更简单的选择器。此外，可以使用`createSelector`来创建组合选择器，以提高性能并减少代码重复。
- **代码复用**：在多个特性模块中复用相同的代码片段时，可以考虑将其封装成可重用的库或模块。例如，可以创建一个通用的错误处理effect，供所有特性模块使用。
通过采用这些组织和重构技巧，可以确保代码库始终保持良好的状态，从而支持项目的长期发展。
## 五、测试与调试
### 5.1 单元测试的实践
单元测试是软件开发中不可或缺的一部分，它有助于确保代码的质量和稳定性。在使用ngrx框架进行状态管理时，编写有效的单元测试尤为重要。以下是一些关于如何在ngrx框架中实施单元测试的最佳实践：
- **测试Action**：确保每个Action都能被正确地创建和dispatch。可以使用`createAction`和`props`辅助函数来创建Action，并使用`dispatch`方法来模拟dispatch行为。
```typescript
it('should create an ADD_TODO action', () => {
const title = 'Learn ngrx';
const action = TodosActions.addTodo({ title });
expect(action.type).toBe('[Todo Component] Add Todo');
expect(action.payload.title).toBe('Learn ngrx');
});
```
- **测试Reducer**：验证Reducer是否能正确处理各种Action类型，并返回预期的新状态。可以使用`store`的`select`方法来获取状态，并使用`ofActionDispatched`来模拟dispatch行为。
```typescript
it('should handle ADD_TODO', () => {
const initialState: Todo[] = [];
const action = TodosActions.addTodo({ title: 'Learn ngrx' });
const result = todosReducer(initialState, action);
expect(result).toEqual([{ id: 1, title: 'Learn ngrx', completed: false }]);
});
```
- **测试Effect**：确保Effect能正确监听Action，并执行相应的异步操作。可以使用`provideMockActions`来模拟Actions流，并使用`ofType`来监听特定的Action类型。
```typescript
it('should dispatch a LOAD_TODOS_SUCCESS action after loading todos', () => {
const todos = [{ id: 1, title: 'Learn ngrx', completed: false }];
const action = TodosActions.loadTodos();
const completion = TodosActions.loadTodosSuccess({ todos });
const actions = hot('-a-|', { a: action });
const output = cold('-b-|', { b: completion });
const source = actions.pipe(...this.effect.loadTodos$);
expect(source).toBeObservable(output);
});
```
通过实施这些单元测试实践，可以确保ngrx框架中的各个组件都能按预期工作，并且在整个开发过程中保持代码的高质量。
### 5.2 集成测试的策略
集成测试是确保不同组件之间能够协同工作的关键。在使用ngrx框架时，集成测试可以帮助验证组件、服务和ngrx状态管理之间的交互是否正确。以下是一些关于如何在ngrx框架中实施集成测试的最佳实践：
- **模拟Store**：在集成测试中，通常需要模拟Store的行为。可以使用`TestBed.configureTestingModule`来配置TestingModule，并使用`provideMockStore`来模拟Store实例。
```typescript
beforeEach(() => {
TestBed.configureTestingModule({
imports: [StoreModule.forRoot({})],
providers: [
provideMockStore(),
TodosService,
],
});
});
```
- **组件与Store的交互**：验证组件是否能正确地dispatch Action，并接收来自Store的状态更新。可以使用`store.pipe(select)`来订阅状态，并使用`store.dispatch`来模拟dispatch行为。
```typescript
it('should dispatch ADD_TODO when the add button is clicked', () => {
const fixture = TestBed.createComponent(TodoComponent);
const component = fixture.componentInstance;
const store = TestBed.inject(Store);
spyOn(store, 'dispatch');
component.onAddTodo('Learn ngrx');
fixture.detectChanges();
expect(store.dispatch).toHaveBeenCalledWith(TodosActions.addTodo({ title: 'Learn ngrx' }));
});
```
- **服务与Effects的交互**：验证服务是否能正确地与Effects交互，处理异步操作。可以使用`provideMockActions`来模拟Actions流，并使用`ofType`来监听特定的Action类型。
```typescript
it('should load todos and dispatch a LOAD_TODOS_SUCCESS action', () => {
const todos = [{ id: 1, title: 'Learn ngrx', completed: false }];
const action = TodosActions.loadTodos();
const completion = TodosActions.loadTodosSuccess({ todos });
const actions = hot('-a-|', { a: action });
const output = cold('-b-|', { b: completion });
const source = actions.pipe(...this.effect.loadTodos$);
expect(source).toBeObservable(output);
});
```
通过实施这些集成测试策略，可以确保ngrx框架中的各个组件和服务能够协同工作，并且在整个应用中保持一致性和稳定性。
## 六、性能与安全
### 6.1 性能优化方法
在使用ngrx框架进行状态管理时，性能优化是确保应用流畅运行的关键。以下是一些关于如何优化ngrx应用性能的最佳实践：
- **选择器的高效使用**：选择器通过`createSelector`函数创建，该函数会缓存中间结果，只有当依赖的状态发生变化时才会重新计算。这有助于提高应用的性能。合理地使用选择器不仅可以提高代码的可读性和可维护性，还可以提高应用的性能。
```typescript
export const selectTodos = (state: AppState) => state.todos;
export const selectCompletedTodosCount = createSelector(
selectTodos,
(todos: Todo[]) => todos.filter(todo => todo.completed).length
);
```
- **避免不必要的状态更新**：确保只在真正需要时才更新状态。可以通过在Reducer中检查Action类型来避免不必要的状态更新。
```typescript
export function todosReducer(state = initialState, action: TodosActions.TodosActions) {
switch (action.type) {
case TodosActions.ADD_TODO:
return [...state, { id: state.length + 1, title: action.payload.title, completed: false }];
// 其他case...
default:
return state;
}
}
```
- **使用`takeUntil`取消未完成的异步操作**：对于长时间运行的异步操作，提供取消机制是非常重要的。例如，可以使用RxJS的`takeUntil`操作符来取消正在进行的HTTP请求。
```typescript
private destroy$ = new Subject<void>();
@Effect()
loadTodos$: Observable<Action> = this.actions$.pipe(
ofType(TodosActions.LOAD_TODOS),
switchMap(() =>
this.todoService.loadTodos().pipe(
takeUntil(this.destroy$),
map(todos => new TodosActions.LoadTodosSuccess(todos)),
catchError(error => of(new TodosActions.LoadTodosFailure(error)))
)
)
);
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
```
- **懒加载特性模块**：对于大型应用，可以考虑使用Angular的懒加载特性来动态加载特性模块。这样可以减少初始加载时间，提高应用性能。
通过遵循这些性能优化策略，可以确保应用在处理状态管理和异步操作时既高效又稳定。
### 6.2 内存泄漏的预防与处理
内存泄漏是许多应用中常见的问题，特别是在使用复杂的框架和技术栈时。以下是一些关于如何预防和处理ngrx应用中内存泄漏的最佳实践：
- **取消订阅**：在组件销毁时，确保取消所有订阅。可以使用RxJS的`takeUntil`操作符结合一个Subject来实现这一点。
```typescript
private destroy$ = new Subject<void>();
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
```
- **避免循环引用**：在使用ngrx框架时，确保不会出现循环引用的情况。例如，在使用RxJS操作符时，避免在组件内部创建循环引用。
- **定期检查内存使用情况**：使用浏览器的开发者工具定期检查内存使用情况，以识别潜在的内存泄漏问题。这有助于及时发现问题并采取措施解决。
- **使用`takeUntil`操作符**：对于长时间运行的异步操作，使用`takeUntil`操作符来取消正在进行的操作。这有助于避免由于未完成的操作而导致的内存泄漏。
通过遵循这些预防和处理内存泄漏的策略，可以确保应用在长时间运行时仍然保持良好的性能和稳定性。
## 七、实战案例分析
### 7.1 项目实战案例分析
在实际项目中应用ngrx框架时，遵循最佳实践和风格指南对于确保项目的成功至关重要。以下是一个具体的实战案例，展示了如何在一款待办事项应用中使用ngrx框架进行状态管理。
#### 应用背景
假设我们正在开发一款待办事项应用，该应用允许用户添加、删除和标记待办事项为已完成。为了实现这一目标，我们需要使用ngrx框架来管理应用的状态。
#### 实战步骤
1. **定义状态结构**：首先，定义应用的状态结构。在这个例子中，状态主要由一个待办事项数组组成。
```typescript
export interface AppState {
todos: Todo[];
}
export interface Todo {
id: number;
title: string;
completed: boolean;
}
```
2. **创建Actions**：定义一系列Action来描述用户与应用的交互。
```typescript
export const addTodo = createAction(
'[Todo Component] Add Todo',
props<{ title: string }>()
);
export const removeTodo = createAction(
'[Todo Component] Remove Todo',
props<{ id: number }>()
);
export const toggleTodo = createAction(
'[Todo Component] Toggle Todo',
props<{ id: number }>()
);
```
3. **编写Reducers**：为每个Action编写对应的Reducer来处理状态的变化。
```typescript
export function todosReducer(state = initialState, action: TodosActions.TodosActions) {
switch (action.type) {
case TodosActions.ADD_TODO:
return [...state, { id: state.length + 1, title: action.payload.title, completed: false }];
case TodosActions.REMOVE_TODO:
return state.filter(todo => todo.id !== action.payload.id);
case TodosActions.TOGGLE_TODO:
return state.map(todo =>
todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
);
default:
return state;
}
}
```
4. **创建Effects**：处理异步操作，如从服务器加载待办事项列表。
```typescript
@Effect()
loadTodos$: Observable<Action> = this.actions$.pipe(
ofType(TodosActions.LOAD_TODOS),
switchMap(() =>
this.todoService.loadTodos().pipe(
map(todos => new TodosActions.LoadTodosSuccess(todos)),
catchError(error => of(new TodosActions.LoadTodosFailure(error)))
)
)
);
```
5. **使用选择器**：创建选择器来从状态树中提取特定数据。
```typescript
export const selectTodos = (state: AppState) => state.todos;
export const selectCompletedTodosCount = createSelector(
selectTodos,
(todos: Todo[]) => todos.filter(todo => todo.completed).length
);
```
6. **组件与Store的交互**：在组件中使用`Store`服务来dispatch Action，并通过选择器订阅状态。
```typescript
import { Store } from '@ngrx/store';
import * as TodosSelectors from '../store/todos.selectors';
import * as TodosActions from '../store/todos.actions';
constructor(private store: Store<AppState>) {}
onAddTodo(title: string) {
this.store.dispatch(TodosActions.addTodo({ title }));
}
get todos() {
return this.store.pipe(select(TodosSelectors.selectTodos));
}
```
通过以上步骤，我们可以看到如何将理论知识应用于实际项目中，实现了高效的状态管理。
### 7.2 从理论到实践的过渡
从理论知识过渡到实际项目开发的过程中，开发者需要将抽象的概念转化为具体的代码实现。以下是一些关键点，帮助开发者顺利完成这一过渡：
- **理解核心概念**：在开始编码之前，确保充分理解ngrx框架的核心概念，包括状态、动作、reducers、effects和选择器。
- **逐步构建**：从简单的状态管理开始，逐步增加复杂性。例如，可以从一个简单的待办事项列表开始，然后再添加更多的功能，如分类、标签等。
- **代码审查**：定期进行代码审查，确保代码符合最佳实践和风格指南。这有助于发现潜在的问题，并及时进行修正。
- **持续学习**：随着项目的进展，不断学习新的技术和最佳实践。可以通过阅读官方文档、参与社区讨论等方式来提升自己的技能。
- **性能监控**：在开发过程中，定期检查应用的性能指标，确保应用在处理大量数据时仍然能够保持良好的性能。
通过这些步骤，开发者可以将理论知识转化为实用的技能，并在实际项目中实现高效的ngrx状态管理。
## 八、总结
本文档全面介绍了如何使用ngrx框架进行高效的状态管理，并提供了一系列最佳实践和技术方法。从理解ngrx框架的核心概念开始，我们探讨了如何安装和配置ngrx，以及如何在实际项目中应用这些概念。通过详细的示例和最佳实践，我们展示了如何创建和使用Action、编写清晰的Reducer、合理应用Effects、正确管理状态、使用选择器以及优化异步操作。此外，还强调了代码组织与重构的重要性，并提供了单元测试和集成测试的方法。最后，通过一个具体的实战案例，展示了如何将理论知识应用于实际项目中，实现高效的状态管理。遵循本文档中的指南和建议，开发者可以充分利用ngrx框架的优势，提高开发效率，实现最佳实践。
最新资讯
加载文章中...
