NgRx 的 Actions 是什么？

推荐答案

在 Angular 应用中，NgRx 的 Actions 是用于描述应用中发生的事件的类。每个 Action 都代表一个特定的用户交互或系统事件，例如点击按钮、加载数据或更新状态。Actions 是 NgRx 状态管理机制的核心组成部分，它们通过 Store 分发（dispatch）来触发状态的更新。

一个典型的 Action 类通常包含一个 type 属性，用于标识该 Action 的类型，以及一个可选的 payload 属性，用于携带与该 Action 相关的数据。

// www.javascriptcn.com code example
import { createAction, props } from '@ngrx/store';

export const loadProducts = createAction(
  '[Product] Load Products'
);

export const loadProductsSuccess = createAction(
  '[Product] Load Products Success',
  props<{ products: Product[] }>()
);

export const loadProductsFailure = createAction(
  '[Product] Load Products Failure',
  props<{ error: any }>()
);

本题详细解读

Actions 的作用

Actions 是 NgRx 中用于描述应用中发生的事件的类。它们充当了应用状态变化的触发器。通过定义不同的 Actions，开发者可以清晰地表达应用中可能发生的各种事件，例如用户交互、API 调用结果等。

Actions 的结构

一个 Action 通常包含以下部分：

1. Type: 一个字符串常量，用于唯一标识该 Action。通常使用 [Source] Event 的格式来命名，例如 [Product] Load Products。
2. Payload: 可选的数据，用于携带与该 Action 相关的信息。例如，在加载产品成功时，可能会携带一个产品列表作为 payload。

创建 Actions

在 NgRx 中，通常使用 createAction 函数来创建 Actions。这个函数接受两个参数：

1. Type: 一个字符串，用于标识 Action 的类型。
2. Props: 一个可选的 props 函数，用于定义 Action 的 payload 结构。

// www.javascriptcn.com code example
import { createAction, props } from '@ngrx/store';

export const loadProducts = createAction(
  '[Product] Load Products'
);

export const loadProductsSuccess = createAction(
  '[Product] Load Products Success',
  props<{ products: Product[] }>()
);

export const loadProductsFailure = createAction(
  '[Product] Load Products Failure',
  props<{ error: any }>()
);

分发 Actions

Actions 通过 Store 的 dispatch 方法进行分发。当 Action 被分发时，NgRx 会将其传递给相应的 Reducers 和 Effects，从而触发状态的更新或执行副作用。

// www.javascriptcn.com code example
import { Store } from '@ngrx/store';
import { loadProducts } from './product.actions';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
})
export class ProductListComponent {
  constructor(private store: Store) {}

  ngOnInit() {
    this.store.dispatch(loadProducts());
  }
}

Actions 与 Reducers 和 Effects 的关系

• Reducers: Reducers 是纯函数，负责根据当前状态和分发的 Action 来计算新的状态。每个 Reducer 都会监听特定的 Action 类型，并在匹配时更新状态。
• Effects: Effects 是用于处理副作用的机制，例如异步 API 调用。Effects 监听特定的 Actions，并在必要时执行异步操作，然后分发新的 Actions 来更新状态。

通过 Actions、Reducers 和 Effects 的协同工作，NgRx 提供了一种可预测的状态管理机制，使得 Angular 应用的状态变化更加清晰和可控。