Angular 中如何使用 Ngrx-JavaScript中文网-JavaScript教程资源分享门户

什么是 Ngrx

Ngrx 是一个基于 Redux 的状态管理库，它提供了一种在 Angular 应用中管理状态的方式。它可以帮助我们在 Angular 应用中更好地组织和管理状态，并且可以提高应用的性能。

如何使用 Ngrx

安装依赖

首先，我们需要安装 Ngrx 相关的依赖。在命令行中输入以下命令：

npm install @ngrx/store @ngrx/effects @ngrx/store-devtools --save

创建 Store

在 Angular 中，我们可以使用 @ngrx/store 中的 createStore 方法来创建一个 Store。在 app.module.ts 中，我们需要导入 StoreModule 并使用 forRoot 方法来创建 Store。

// javascriptcn.com 代码示例
import { StoreModule } from '@ngrx/store';
import { reducers } from './reducers';

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

在上面的代码中，我们导入了 reducers，它是一个纯函数，用于处理应用程序的状态。我们将在下一节中详细讨论它。

创建 Reducer

在 Ngrx 中，Reducer 负责处理状态的变化。Reducer 是一个纯函数，它接收当前的状态和一个 Action，并返回一个新的状态。

我们可以使用 @ngrx/store 中的 createReducer 方法来创建一个 Reducer。在 reducers.ts 中，我们可以定义我们的 Reducer。

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

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1),
  on(reset, state => 0)
);

在上面的代码中，我们定义了一个名为 counterReducer 的 Reducer。它有一个初始状态为 0，并且可以处理三个不同的 Action：increment、decrement 和 reset。

创建 Action

在 Ngrx 中，Action 是一个简单的对象，它描述了状态的变化。我们可以使用 @ngrx/store 中的 createAction 方法来创建一个 Action。

在 counter.actions.ts 中，我们可以定义我们的 Action。

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

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

在上面的代码中，我们定义了三个不同的 Action：increment、decrement 和 reset。

创建 Effects

在 Ngrx 中，Effect 可以用于处理异步操作。我们可以使用 @ngrx/effects 中的 createEffect 方法来创建一个 Effect。

在 counter.effects.ts 中，我们可以定义我们的 Effect。

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';

import { CounterService } from './counter.service';
import { loadCounter, loadCounterSuccess, loadCounterFailure } from './counter.actions';

@Injectable()
export class CounterEffects {
  loadCounter$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadCounter),
      mergeMap(() =>
        this.counterService.getCounter().pipe(
          map(counter => loadCounterSuccess({ counter })),
          catchError(error => of(loadCounterFailure({ error })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private counterService: CounterService
  ) {}
}

在上面的代码中，我们定义了一个名为 loadCounter$ 的 Effect。它使用 CounterService 中的 getCounter 方法来获取计数器的值，并根据结果发出一个成功或失败的 Action。

创建 Service

在上面的代码中，我们使用了 CounterService 来获取计数器的值。在 counter.service.ts 中，我们可以定义我们的 Service。

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  getCounter(): Observable<number> {
    return of(42);
  }
}

在上面的代码中，我们定义了一个名为 CounterService 的 Service。它有一个名为 getCounter 的方法，用于获取计数器的值。

在组件中使用 Store

在我们的应用程序中，我们可以使用 @ngrx/store 中的 select 方法来选择我们的状态，并使用 dispatch 方法来发出 Action。

在 counter.component.ts 中，我们可以定义我们的组件。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

import { AppState } from './app.state';
import { increment, decrement, reset, loadCounter } from './counter.actions';
import { selectCounter } from './counter.selectors';

@Component({
  selector: 'app-counter',
  template: `
    <div>Current Count: {{ counter$ | async }}</div>

    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset</button>
    <button (click)="loadCounter()">Load Counter</button>
  `
})
export class CounterComponent {
  counter$: Observable<number>;

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

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

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

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

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

在上面的代码中，我们定义了一个名为 CounterComponent 的组件。它使用 select 方法来选择我们的状态，并使用 dispatch 方法来发出 Action。

总结

在本文中，我们介绍了如何在 Angular 应用中使用 Ngrx。我们学习了如何创建 Store、Reducer、Action、Effect 和 Service，并在组件中使用 Store。希望这篇文章对你学习和理解 Ngrx 有所帮助。

示例代码

示例代码可以在 GitHub 上找到。

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