Angular NGRX Store 简介

NGRX 是一个针对 Angular 应用的状态管理库，它基于 Redux 的概念。在这个文档中，我们将介绍 NGRX Store 的基本用法和功能。

安装 NGRX

在 Angular 项目中安装 NGRX，您可以使用以下命令：

npm install @ngrx/store

Store 的概念

在 NGRX 中，Store 是一个全局的状态仓库，它存储了所有组件需要共享的状态。您可以通过 Store 来获取、修改和监听状态。

如何使用 Store

  1. 创建 Actions

    Actions 是一个对象，它携带了描述应用程序状态的变更信息。

    export const loadUsers = () => ({
  type: 'LOAD_USERS'
});

  2. 创建 Reducers

    Reducers 是一个函数，它接收当前的 state 和一个 action，然后返回一个新的 state。

    import { createReducer, on } from '@ngrx/store';

const initialState = {
  users: []
};

const usersReducer = createReducer(
  initialState,
  on('LOAD_USERS', (state) => ({
    ...state,
    users: [] // 可以在这里添加用户数据
  }))
);

export function usersReducer(state, action) {
  return usersReducer(state, action);
}

  3. 创建 Effects

    Effects 用于处理异步逻辑，例如 API 调用。

    import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { loadUsers } from './actions';
import { usersReducer } from './reducers';

@Injectable()
export class UsersEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      mergeMap(() =>
        this.userService.fetchUsers().pipe(
          map(users => ({
            type: '[Users] Load Users Success',
            payload: users
          })),
          catchError(error => of({
            type: '[Users] Load Users Failure',
            payload: error
          }))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private userService: UserService
  ) {}
}

  4. 在组件中使用 Store

    您可以使用 NgxsModule 来在组件中注入 Store。

    import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { loadUsers } from './actions';
import { selectUsers } from './selectors';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent {
  users$: Observable<any>;

  constructor(private store: Store) {
    this.users$ = this.store.select(selectUsers);
  }

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

图片示例

中心图片示例

更多关于 NGRX 的信息，请访问我们的 Angular NGRX 教程。