NgRx 教程：使用 Redux 实现 Angular 应用程序-JavaScript中文网-JavaScript教程资源分享门户

什么是 NgRx？

NgRx 是一个用于 Angular 应用程序的状态管理库，它基于 Redux 架构设计。NgRx 可以帮助我们管理应用程序的复杂状态，并使得状态变更的过程可追踪和可预测。

为什么使用 NgRx？

在 Angular 应用程序中，随着应用程序复杂度的增加，状态管理变得越来越困难。在没有状态管理库的情况下，我们需要手动管理各种状态变量，这会导致代码变得难以维护和扩展。而使用 NgRx，我们可以将状态逻辑分离出来，使得代码更加清晰和可维护。

NgRx 的核心概念

Action

Action 表示状态变更的事件，它是一个纯 JavaScript 对象，包含一个 type 属性和一个可选的 payload 属性。Action 用于描述应用程序中发生的事件，比如用户点击某个按钮、从服务器获取数据等。

interface Action {
  type: string;
  payload?: any;
}

Reducer

Reducer 是一个纯函数，它接收当前状态和一个 Action，返回一个新的状态。Reducer 的作用是根据 Action 来更新状态，不会对原有状态进行修改，而是返回一个新的状态。

// javascriptcn.com 代码示例
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

Store

Store 是一个管理应用程序状态的容器，它包含一个状态对象和一些方法，比如 dispatch 和 subscribe。Store 用于将 Reducer 和 Action 关联起来，并提供一种统一的方式来管理应用程序状态。

const store = createStore(reducer, initialState);
store.dispatch({ type: 'INCREMENT' });
store.subscribe(() => console.log(store.getState()));

Selector

Selector 是一个函数，用于从应用程序状态中获取指定的数据。Selector 可以帮助我们避免直接访问应用程序状态，从而提高代码的可维护性和可测试性。

const getCount = (state: State) => state.count;
const count = store.select(getCount);

NgRx 的应用

安装 NgRx

首先，我们需要安装 NgRx 库和相关依赖：

npm install @ngrx/store @ngrx/effects @ngrx/entity

创建 Action

我们先创建一个简单的 Action，用于增加计数器的值：

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

export const increment = createAction('[Counter] Increment');

创建 Reducer

接着，我们创建一个简单的 Reducer，用于处理上面定义的 Action：

// javascriptcn.com 代码示例
import { createReducer, on } from '@ngrx/store';
import { increment } from './counter.actions';

export interface CounterState {
  count: number;
}

export const initialState: CounterState = {
  count: 0,
};

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ count: state.count + 1 }))
);

创建 Store

我们使用 StoreModule 来注册我们的 Reducer，并将其注入到应用程序的根模块中：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { AppComponent } from './app.component';

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

使用 Selector

最后，我们可以使用 createSelector 函数来创建一个 Selector，用于从应用程序状态中获取计数器的值：

import { createSelector } from '@ngrx/store';
import { CounterState } from './counter.reducer';

export const selectCount = createSelector(
  (state: { counter: CounterState }) => state.counter,
  (counter) => counter.count
);

使用 Effects

除了上面的 Action、Reducer 和 Selector，NgRx 还提供了 Effects，用于处理副作用（比如从服务器获取数据）。

我们可以使用 createEffect 函数来创建一个 Effect，并将其注入到应用程序的根模块中：

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map } from 'rxjs/operators';
import { ApiService } from './api.service';
import { loadUsers, loadUsersSuccess } from './user.actions';

@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      switchMap(() =>
        this.apiService.getUsers().pipe(
          map((users) => loadUsersSuccess({ users }))
        )
      )
    )
  );

  constructor(private actions$: Actions, private apiService: ApiService) {}
}

总结

本文介绍了 NgRx 的核心概念和使用方法，包括 Action、Reducer、Store、Selector 和 Effects。使用 NgRx 可以帮助我们管理应用程序的复杂状态，并使得状态变更的过程可追踪和可预测。如果您正在开发一个复杂的 Angular 应用程序，那么 NgRx 是一个非常有用的工具。

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