ngrx：管理Angular应用程序状态的可靠之选

2024-02-06 18:20:39

导语

在应用开发中，管理状态是一种常见需求，而ngrx/store作为Angular的响应式Redux库，提供了一种独特的状态管理方法，能够有效提升开发和维护效率，优化应用性能。本文将带领你探索ngrx/store的魅力，并借助一个小型Angular应用进行实践，最终代码可在此处获取。

揭秘ngrx/store：Redux的Angular延伸

ngrx/store是Redux在Angular中的延伸，本质上是一个响应式状态管理库，允许你在Angular应用中使用Redux模式进行状态管理。

为何选择ngrx/store？

响应式编程： ngrx/store采用响应式编程范式，便于你轻松处理异步操作，实现数据流的无缝衔接。
不可变数据存储： ngrx/store强制执行不可变数据存储原则，确保状态始终保持一致，从而增强代码可预测性和可靠性。
开发效率提升： ngrx/store提供一组工具和组件，帮助你快速构建和维护Angular应用，显著提高开发效率。

实践出真知：构建小型Angular应用

为了更直观地理解ngrx/store的运作方式，我们构建一个小型Angular应用，一步步感受其强大的功能。

1. 初始化应用程序

首先，使用Angular CLI创建初始应用程序：

ng new ngrx-state-management
cd ngrx-state-management

2. 安装ngrx/store

接下来，安装ngrx/store及其相关依赖：

npm install @ngrx/store @ngrx/effects

3. 创建初始状态

在src/app/state/state.model.ts中创建初始状态：

export interface AppState {
  counter: number;
}

export const initialState: AppState = {
  counter: 0
};

4. 创建Reducer函数

在src/app/state/state.reducer.ts中创建Reducer函数：

import { Action } from '@ngrx/store';
import { AppState } from './state.model';

export function stateReducer(state: AppState = initialState, action: Action): AppState {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return { ...state, counter: state.counter + 1 };

    case 'DECREMENT_COUNTER':
      return { ...state, counter: state.counter - 1 };

    default:
      return state;
  }
}

5. 在应用程序中使用ngrx/store

在src/app/app.component.ts中，使用ngrx/store来管理状态：

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from './state/state.model';
import { incrementCounter, decrementCounter } from './state/state.actions';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  counter$: Observable<number>;

  constructor(private store: Store<AppState>) { }

  ngOnInit() {
    this.counter$ = this.store.select(state => state.counter);
  }

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

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

6. 在模板中显示状态

在src/app/app.component.html中，显示当前计数：

<div class="container">
  <div class="counter">
    <h1>{{ counter$ | async }}</h1>
  </div>

  <button (click)="incrementCounter()">+</button>
  <button (click)="decrementCounter()">-</button>
</div>