redux-action-class

Redux middleware that allows to dispatch Typescript class-based actions.

Motivation

Write action creators using Typescript requires a lot of boilerplate.

export const INCREMENT = 'INCREMENT';
export type INCREMENT = typeof INCREMENT;

export interface Increment {
  type: INCREMENT
  payload: number
}

export function increment(value: number): Increment {
  return {
    type: INCREMENT,
    payload: value
  }
}

A more simplified approach is to use class-based actions that reduce boilerplate.

export const INCREMENT = 'INCREMENT';

export class Increment {
  readonly type = INCREMENT
  constructor(public payload: number) {}
}

But redux can't dispatch class-based actions More info.

// not allowed
store.dispatch(new Increment(10));

With this middleware you can dispatch class-based actions.

Quick start

1. Install with npm (or Yarn)

npm install --save redux-action-class

2. Add the middleware in your store configuration.

import { createStore, applyMiddleware } from 'redux';
import actionToPlainObjectConverter from 'redux-action-class'

const store = createStore(
  rootReducer,
  applyMiddleware(actionToPlainObjectConverter)
);

License

MIT