ngrx/store 开源项目教程

项目介绍

ngrx/store 是一个基于 RxJS 的状态管理库，专为 Angular 应用程序设计。它遵循 Redux 的设计原则，通过单一数据源和不可变状态来管理应用程序的状态。ngrx/store 提供了一种可预测的方式来处理状态变化，使得状态管理更加清晰和可维护。

项目快速启动

安装

首先，确保你已经安装了 Angular CLI。然后，通过以下命令安装 ngrx/store：

npm install @ngrx/store --save

配置

在你的 Angular 项目中，打开 app.module.ts 文件，并添加 StoreModule 到 imports 数组中：

import { StoreModule } from '@ngrx/store';
import { reducers } from './reducers';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot(reducers)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建 Reducer

创建一个名为 reducers 的文件夹，并在其中创建一个 index.ts 文件，定义你的 reducer：

import { ActionReducerMap } from '@ngrx/store';
import { AppState } from '../app.state';
import { counterReducer } from './counter.reducer';

export const reducers: ActionReducerMap<AppState> = {
  counter: counterReducer
};

创建 Action

在 actions 文件夹中创建一个 counter.actions.ts 文件，定义你的 action：

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');

创建 Reducer

在 reducers 文件夹中创建一个 counter.reducer.ts 文件，定义你的 reducer：

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from '../actions/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);
}

使用 Store

在你的组件中，注入 Store 并使用它：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from './actions/counter.actions';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="increment()">Increment</button>
    <div>Current Count: {{ count$ | async }}</div>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset</button>
  `
})
export class AppComponent {
  count$: Observable<number>;

  constructor(private store: Store<{ counter: number }>) {
    this.count$ = store.select('counter');
  }

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

应用案例和最佳实践

应用案例

ngrx/store 可以用于管理复杂的状态，例如用户认证、购物车状态、表单数据等。以下是一个简单的用户认证状态管理的例子：

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

export const login = createAction('[Auth] Login', props<{ username: