使用 Angular 的 ngrx 状态管理-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，状态管理是一个重要的话题。状态是指应用程序中的数据，以及这些数据随着时间的推移而发生的变化。在复杂的应用程序中，状态管理可以变得非常复杂，特别是当多个组件需要共享相同的状态时。为了解决这个问题，Angular 提供了一个名为 ngrx 的状态管理库。

什么是 ngrx？

ngrx 是一个基于 Redux 的状态管理库，它提供了一种统一的方法来处理应用程序中的数据流。ngrx 的核心概念是 Store，它是一个可观察的对象，用于保存应用程序状态。Store 中的状态可以通过 Action 进行更新。Action 是一个用于描述状态变化的简单对象，它包含一个类型和一个可选的负载。

ngrx 还提供了一些辅助函数，如 reducer 和 selector，用于处理状态的更新和查询。reducer 是一个纯函数，它接收当前状态和一个 Action，并返回一个新状态。selector 是一个纯函数，它接收当前状态并返回一个派生状态。

如何使用 ngrx？

要使用 ngrx，首先需要安装它。可以使用 Angular CLI 来安装 ngrx：

ng add @ngrx/store

安装完成后，就可以在应用程序中使用 ngrx 了。首先需要定义应用程序的状态。状态通常是一个 JavaScript 对象，它包含应用程序中的所有数据。例如，一个简单的计数器应用程序可能有以下状态：

interface AppState {
  count: number;
}

接下来，需要定义应用程序的 Action。Action 是一个简单的对象，它描述了状态的变化。例如，计数器应用程序可能有以下 Action：

// javascriptcn.com 代码示例
enum CounterActionTypes {
  Increment = '[Counter] Increment',
  Decrement = '[Counter] Decrement',
}

class Increment implements Action {
  readonly type = CounterActionTypes.Increment;
}

class Decrement implements Action {
  readonly type = CounterActionTypes.Decrement;
}

最后，需要定义应用程序的 reducer。reducer 是一个纯函数，它接收当前状态和一个 Action，并返回一个新状态。例如，计数器应用程序的 reducer 可能如下所示：

// javascriptcn.com 代码示例
function counterReducer(state: AppState, action: Action): AppState {
  switch (action.type) {
    case CounterActionTypes.Increment:
      return { ...state, count: state.count + 1 };
    case CounterActionTypes.Decrement:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

在应用程序中使用 ngrx 的过程中，还需要创建一个 Store 对象，并将其提供给应用程序的根组件。可以使用 StoreModule 来创建 Store 对象：

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

最后，可以在组件中使用 ngrx 的辅助函数来处理状态的更新和查询。例如，计数器组件可以使用 Select 和 Dispatch 函数来查询和更新计数器状态：

// javascriptcn.com 代码示例
@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">+</button>
    <span>{{ count$ | async }}</span>
    <button (click)="decrement()">-</button>
  `,
})
export class CounterComponent {
  count$: Observable<number>;

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

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

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

总结

ngrx 是一个非常强大的状态管理库，它提供了一种统一的方法来处理应用程序中的数据流。使用 ngrx 可以使应用程序的状态管理变得更加简单和直观。在使用 ngrx 时，需要定义应用程序的状态、Action 和 reducer，并创建一个 Store 对象。使用 ngrx 的辅助函数可以方便地处理状态的更新和查询。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657c2a92d2f5e1655d6f2938