javascript - 基于字符串创建 NGRX 操作的工厂

Question

假设我有以下操作

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

import { Skill } from '../../models/skill.model';

export const LOAD_SKILLS = '[Skills Section] Load Skills';
export const LOAD_SKILLS_FAIL = '[Skills Section] Load Skills Fail';
export const LOAD_SKILLS_SUCCESS = '[Skills Section] Load Skills Success';
export const CLEAR_SKILLS = '[Skills Section] Clear Skills';

export class LoadSkills implements Action {
    readonly type = LOAD_SKILLS;
}

export class LoadSkillsFail implements Action {
    readonly type = LOAD_SKILLS_FAIL;
    constructor(public payload: any) { }
}

export class LoadSkillsSuccess implements Action {
    readonly type = LOAD_SKILLS_SUCCESS;
    constructor(public payload: Skill[]) { }
}

export class ClearSkills implements Action {
    readonly type = CLEAR_SKILLS;
}

// create skill
export const CREATE_SKILL = '[Skills Section] Create Skill';
export const CREATE_SKILL_FAIL = '[Skills Section] Create Skill Fail';
export const CREATE_SKILL_SUCCESS = '[Skills Section] Create Skill Success';

export class CreateSkill implements Action {
    readonly type = CREATE_SKILL;
    constructor(public payload: Skill) { }
}

export class CreateSkillFail implements Action {
    readonly type = CREATE_SKILL_FAIL;
    constructor(public payload: any) { }
}

export class CreateSkillSuccess implements Action {
    readonly type = CREATE_SKILL_SUCCESS;
    constructor(public payload: Skill) { }
}

// update skill
export const UPDATE_SKILL = '[Skills Section] Update Skill';
export const UPDATE_SKILL_FAIL = '[Skills Section] Update Skill Fail';
export const UPDATE_SKILL_SUCCESS = '[Skills Section] Update Skill Success';

export class UpdateSkill implements Action {
    readonly type = UPDATE_SKILL;
    constructor(public payload: Skill) { }
}

export class UpdateSkillFail implements Action {
    readonly type = UPDATE_SKILL_FAIL;
    constructor(public payload: any) { }
}

export class UpdateSkillSuccess implements Action {
    readonly type = UPDATE_SKILL_SUCCESS;
    constructor(public payload: Skill) { }
}

// remove skill
export const REMOVE_SKILL = '[Skills Section] Remove Skill';
export const REMOVE_SKILL_FAIL = '[Skills Section] Remove Skill Fail';
export const REMOVE_SKILL_SUCCESS = '[Skills Section] Remove Skill Success';

export class RemoveSkill implements Action {
    readonly type = REMOVE_SKILL;
    constructor(public payload: Skill) { }
}

export class RemoveSkillFail implements Action {
    readonly type = REMOVE_SKILL_FAIL;
    constructor(public payload: any) { }
}

export class RemoveSkillSuccess implements Action {
    readonly type = REMOVE_SKILL_SUCCESS;
    constructor(public payload: Skill) { }
}

// set Selected skill id
export const SET_SELECTED_SKILL_ID = '[Skills Section] Set Selected Skill Id';
export const CLEAR_SELECTED_SKILL_ID = '[Skills Section] Clear Selected Skill Id';

export class SetSelectedSkillId implements Action {
    readonly type = SET_SELECTED_SKILL_ID;
    constructor(public payload: string) { }
}

export class ClearSelectedSkillId implements Action {
    readonly type = CLEAR_SELECTED_SKILL_ID;
}

/////////////////////////////////////////////////////////////////////
// action types
export type SkillsAction =
    | LoadSkills
    | LoadSkillsFail
    | LoadSkillsSuccess
    | ClearSkills
    | CreateSkill
    | CreateSkillFail
    | CreateSkillSuccess
    | UpdateSkill
    | UpdateSkillFail
    | UpdateSkillSuccess
    | RemoveSkill
    | RemoveSkillFail
    | RemoveSkillSuccess
    | SetSelectedSkillId
    | ClearSelectedSkillId;

有什么方法可以将整个东西包装到一个工厂函数中，该函数生成完全相同的代码段，接受名称参数并用该参数替换单词“Skill”？

我尝试过使用装饰器，但很快就失败了，然后我尝试了解 javascript 中的类型和类是什么，并理解这是所有函数，所以也许解决方案就在那里。

在 JS 中是否有反射的等价物，也许可以解决这个问题？

Answer 1

我在使用 NGRX 时遇到了完全相同的问题 - 操作和 reducer 的重复样板代码过多。

你可以像这样生成动态命名的类:

const ClassFactory = (className) => {
    const obj = {};
    obj[className] = class { };
    return obj[className];
};

const classA = ClassFactory('classA');