NgRx 开源项目教程
ngrx.github.ioReactive Extensions for Angular项目地址:https://gitcode.com/gh_mirrors/ng/ngrx.github.io
项目介绍
NgRx 是一个用于 Angular 应用的响应式扩展库,提供了状态管理、副作用模型、IndexedDB 支持、Web 通知等功能。它基于 Redux 的设计理念,结合 RxJS 的强大能力,帮助开发者构建高效、可维护的 Angular 应用。
项目快速启动
安装
首先,确保你已经安装了 Angular CLI。然后,通过以下命令安装 NgRx:
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools --save
创建一个简单的状态管理应用
-
创建一个新的 Angular 项目
ng new my-ngrx-app cd my-ngrx-app
-
在应用中配置 NgRx
在
app.module.ts
中引入 NgRx 模块:import { StoreModule } from '@ngrx/store'; import { EffectsModule } from '@ngrx/effects'; import { reducers, metaReducers } from './reducers'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StoreModule.forRoot(reducers, { metaReducers }), EffectsModule.forRoot([]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
创建一个简单的状态和动作
创建一个
counter.reducer.ts
文件:import { createReducer, on } from '@ngrx/store'; import { increment, decrement, reset } from './counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, state => state + 1), on(decrement, state => state - 1), on(reset, state => 0) ); export function counterReducer(state, action) { return _counterReducer(state, action); }
创建一个
counter.actions.ts
文件:import { createAction } from '@ngrx/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement'); export const reset = createAction('[Counter] Reset');
-
在组件中使用状态
在
app.component.ts
中引入并使用状态:import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import { increment, decrement, reset } from './counter.actions'; @Component({ selector: 'app-root', template: ` <button (click)="increment()">Increment</button> <div>Current Count: {{ count }}</div> <button (click)="decrement()">Decrement</button> <button (click)="reset()">Reset</button> ` }) export class AppComponent { count$ = this.store.select('count'); constructor(private store: Store<{ count: number }>) {} increment() { this.store.dispatch(increment()); } decrement() { this.store.dispatch(decrement()); } reset() { this.store.dispatch(reset()); } }
应用案例和最佳实践
应用案例
NgRx 可以用于管理复杂的状态,例如在一个电子商务应用中,可以使用 NgRx 来管理购物车状态、用户认证状态等。
最佳实践
- 保持动作和状态的单一职责:每个动作只做一件事,每个状态只管理一个方面的数据。
- 使用选择器(Selectors):选择器可以帮助你从状态中提取数据,并且可以缓存结果,提高性能。
- 使用 Effects 处理副作用:将副作用(如 API 调用)放在 Effects 中处理,保持 reducer 的纯净性
ngrx.github.ioReactive Extensions for Angular项目地址:https://gitcode.com/gh_mirrors/ng/ngrx.github.io