如何在NgRx中为分发的Action传递参数？

现有代码 #

Action 定义 #

export enum ActionTypes {
  UpdateData = '[Data] Update Data',
}

export class UpdateData implements Action {
  readonly type = ActionTypes.UpdateData;

  constructor(public payload: any) {}
}

Reducer 实现 #

export interface AppState {
  data: any;
}

const initialState: AppState = {
  data: null,
};

export function appReducer(state = initialState, action: Actions): AppState {
  switch (action.type) {
    case ActionTypes.UpdateData:
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
}

组件代码 #

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './app.state';
import { UpdateData } from './store/actions';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="updateData()">Update Data</button>
  `,
})
export class MyComponent {
  constructor(private store: Store<AppState>) {}

  updateData() {
    // 如何在此处为Action传递参数？
    this.store.dispatch(new UpdateData(/* 此处应传入什么？ */));
  }
}

解决方案 #

你的UpdateData Action已经通过构造函数接收payload参数，直接在分发时传入需要更新的数据即可，支持字符串、对象等任意类型。

示例1：传递字符串参数 #

修改组件的updateData方法：

updateData() {
  this.store.dispatch(new UpdateData('更新后的字符串内容'));
}

示例2：传递对象参数 #

如果需要更新结构化数据：

updateData() {
  const updatedData = {
    id: 1,
    title: '用户信息',
    content: '这是新的用户数据'
  };
  this.store.dispatch(new UpdateData(updatedData));
}

类型安全优化（可选） #

避免使用any类型，给数据和Action指定具体类型，提升代码可维护性：

1. 定义数据类型接口：

export interface UserData {
  id?: number;
  title?: string;
  content?: string;
}

2. 更新Action定义：

export class UpdateData implements Action {
  readonly type = ActionTypes.UpdateData;

  constructor(public payload: UserData) {} // 替换any为UserData
}

3. 更新AppState：

export interface AppState {
  data: UserData | null; // 替换any为UserData | null
}

内容的提问来源于stack exchange，提问作者Huzaifah Khan