Style Guide

Model

Gizmo.model.ts

export interface Gizmo {
  readonly description: string;
  readonly id: string;
  readonly name: string;
}

https://redux.js.org/docs/faq/OrganizingState.html#organizing-state-non-serializable

Can I put functions, promises, or other non-serializable items in my store state? It is highly recommended that you only put plain serializable objects, arrays, and primitives into your store. It's technically possible to insert non-serializable items into the store, but doing so can break the ability to persist and rehydrate the contents of a store, as well as interfere with time-travel debugging.

If you are okay with things like persistence and time-travel debugging potentially not working as intended, then you are totally welcome to put non-serializable items into your Redux store. Ultimately, it's your application, and how you implement it is up to you. As with many other things about Redux, just be sure you understand what tradeoffs are involved.

https://stackoverflow.com/questions/43181516/getting-model-instance-from-ngrx-store-select/43185931#43185931

But: It is generally not recommended to have Class-Instances in the store, there are a few rules of thumb:

The store-content should serializable without any major modifications (=> just use Object and Primitives) ngrx (and rxjs in general) are relying heavily on functional programming patterns, so mixing it Object Oriented paradigms is not recommended.

Action

// tslint:disable:max-classes-per-file
import { Action } from "@ngrx/store";

import { Gizmo } from "./gizmo.model";

export enum GizmoActionTypes {
  //
  DATABASE_DELETE_ITEM = "[Gizmo] (Database) Delete Item",
  DATABASE_LISTEN_FOR_ADDED_ITEMS = "[Gizmo] (Database) Listen For Added Items"
}

export class DatabaseDeleteItem implements Action {
  public readonly type = GizmoActionTypes.DATABASE_DELETE_ITEM;

  constructor(public payload: { id: string; userId: string }) {}
}

export class DatabaseListenForAddedItems implements Action {
  public readonly type = GizmoActionTypes.DATABASE_LISTEN_FOR_ADDED_ITEMS;
}

export type GizmoActions = DatabaseDeleteItem | DatabaseListenForAddedItems;

https://angular.io/guide/styleguide#interfaces

Do name an interface using upper camel case.

Consider naming an interface without an I prefix.

Consider using a class instead of an interface for services and declarables (components, directives, and pipes).

Consider using an interface for data models.

Why? TypeScript guidelines discourage the I prefix.

Why? A class alone is less code than a class-plus-interface.

Why? A class can act as an interface (use implements instead of extends).

Why? An interface-class can be a provider lookup token in Angular dependency injection.