Skip to the content.

Redux action creators with less TypeScript cruft

Declare Redux action creators like this:

export const search = action("[Books] Search", payload<string>());
export const searchComplete = action("[Books] Search Complete", payload<Book[]>());
export const searchError = action("[Books] Search Error", payload<string>());

Instead of like this:

export enum BookActionTypes {
  SEARCH = "[Books] Search",
  SEARCH_COMPLETE = "[Books] Search Complete",
  SEARCH_ERROR = "[Books] Search Error"
}

export class Search implements Action {
  readonly type = BookActionTypes.SEARCH;
  constructor(public payload: string) {}
}

export class SearchComplete implements Action {
  readonly type = BookActionTypes.SEARCH_COMPLETE;
  constructor(public payload: Book[]) {}
}

export class SearchError implements Action {
  readonly type = BookActionTypes.SEARCH_ERROR;
  constructor(public payload: string) {}
}

And compose NgRx effects and redux-observable epics like this:

actions
  .ofType(Books.Search)
  .toPayload()

Instead of like this:

actions
  .ofType<Books.Search>(Books.BookActionTypes.SEARCH)
  .map(action => action.payload)