NgRx 开源项目教程

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

创建一个简单的状态管理应用

1. 创建一个新的 Angular 项目

   ng new my-ngrx-app
   cd my-ngrx-app
   

2. 在应用中配置 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 { }
   

3. 创建一个简单的状态和动作

   创建一个 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');
   

4. 在组件中使用状态

   在 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 来管理购物车状态、用户认证状态等。

最佳实践

1. 保持动作和状态的单一职责：每个动作只做一件事，每个状态只管理一个方面的数据。
2. 使用选择器（Selectors）：选择器可以帮助你从状态中提取数据，并且可以缓存结果，提高性能。
3. 使用 Effects 处理副作用：将副作用（如 API 调用）放在 Effects 中处理，保持 reducer 的纯净性

ngrx.github.ioReactive Extensions for Angular项目地址:https://gitcode.com/gh_mirrors/ng/ngrx.github.io