如何将“通用”ngrx 操作作为参数传递？

Question

我想为我的一些实体编写 CRUD 服务，但想在抽象类中编写逻辑。为了简单起见，这些是我的操作组，请注意，针对这个问题，所有代码都被删除了：

export const GroupsActions = createActionGroup({
  source: 'Groups',
  events: {
    'Load Groups': emptyProps(),
    'Add Group': props<{ group: GroupModel }>(),
    'Update Group': props<{ group: GroupModel }>(),
    'Remove Group': props<{ id: number }>(),
  },
});
export const ShapeActions = createActionGroup({
  source: 'Shapes',
  events: {
    'Load Shapes': emptyProps(),
    'Add Shape': props<{ shape: ShapeModel }>(),
    'Update Shape': props<{ shape: ShapeModel }>(),
    'Remove Shape': props<{ id: number }>(),
  },
});
export const ColorActions = createActionGroup({
  source: 'Colors',
  events: {
    'Load Colors': emptyProps(),
    'Add Color': props<{ color: ColorModel }>(),
    'Update Color': props<{ color: ColorModel }>(),
    'Remove Color': props<{ id: number }>(),
  },
});

现在我有一个抽象

CRUDService<T>

，需要采取不同的操作，就像这样（伪）：

@Component({ template: '' })
export abstract class CRUDService<T> {
  constructor(
    private addAction ???,
    private updateAction ???,
    private deleteAction ???
  ) {}
  //...
}

这样我就可以在这个类中做一些通用的事情，比如：

saveEntry = (entity: T) => {
  //... Validation, create updatedEntity with updated stats
  // Create a new object if the id === 0, Update it otherwise
    entity.id === 0
      ? this.store.dispatch(this.addAction(updatedEntity))
      : this.store.dispatch(this.updateAction(updatedEntity));
}

deleteEntry = (entity: T) => this.store.dispatch(this.deleteAction(entity.id));

在显式服务中，我想传递操作，就像这样（伪）：

export class CRUDGroupsComponent extends CRUDService<GroupModel> {
  private readonly store = inject(Store);
  private readonly fb = inject(FormBuilder);
  constructor() {
    super(
      GroupsActions.addGroup,
      GroupsActions.updateGroup,
      GroupsActions.removeGroup);
  }
}

“形状”和“颜色”也是如此。我希望这足以清楚地说明我想要实现的目标。如果有些事情不清楚，请告诉我。如有任何帮助，我们将不胜感激。

Answer 1

您可以创建通用操作界面

export interface ICRUDAction<T> {
  type: string;
  payload: T;
}

修改抽象 CRUDService 的构造函数以接受通用操作作为参数：

export abstract class CRUDService<T> {
  constructor(
    private readonly addAction: ICRUDAction<T>,
    private readonly updateAction: ICRUDAction<T>,
    private readonly deleteAction: ICRUDAction<T>
  ) {}

  // ...
}

在每个显式服务中，注入存储并使用界面投影执行操作的注入：

export class CRUDGroupsComponent extends CRUDService<GroupModel> {
  private readonly store = inject(Store);
  private readonly fb = inject(FormBuilder);

  constructor() {
    super(
      GroupsActions.addGroup as ICRUDAction<GroupModel>,
      GroupsActions.updateGroup as ICRUDAction<GroupModel>,
      GroupsActions.removeGroup as ICRUDAction<number>
    );
  }

  // ...
}