javascript - Återanvändbara objekt-literal

Jag har en komponent med en tabell som har handlingsknappar. När man klickar på knappen sänder komponenten en handling, till exempel: (redigera, ta bort, routa)

getEvent(action: ActionButtons, object: any) {
    // type: (edit,delete,route), route: info where to redirect
    const {type, route} = action;
    this.action.emit({ type, route, body: object });
}

I föräldrakomponenten fångar jag detta objekt med följande funktion och utför viss logik beroende på åtgärden:

getAction({type, route, body: {...faculty }}) {
    const action = {
        edit: () => {
            this.openFacultyModal(faculty);
        },
        delete: () => {
            this.openConfirmDialog(faculty);
        },
        route: () => {
            this.redirecTo(faculty.faculty_id);
        }
    };
    action[type]();
}

Problemet är att om jag vill använda tabellen i en annan komponent måste jag klippa ut och klistra in getAction() och bara ändra funktionen inne i objektet.

Det visar sig att det kommer att bli kodduplicering.

Är det möjligt att på något sätt lösa problemet med kodduplication genom att använda closures eller skapa en separat klass?

Svar #1

Du kan göra ditt handlingskartobjekt återanvändbart:

const actions = {
  edit(target, faculty) {
    target.openFacultyModal(faculty);
  },
  delete(target, faculty) {
    target.openConfirmDialog(faculty);
  },
  route(target, faculty) {
    target.redirecTo(faculty.faculty_id);
  }
};

Använd det sedan där det behövs, till exempel i getAction:

getAction({type, route, body: {...faculty }}) {
  actions[type](this, faculty);
}