How to Reduce Action Boilerplate

Photo by Andrew Wulf on Unsplash

I use Redux for my application development and, to take advantage of RxJS, I use NgRx in Angular projects and redux-observable in React projects. I also use TypeScript.

Unfortunately, the amount of boilerplate required for TypeScript to be effective with Redux can be disheartening. In his article Introducing @ngrx/entity, Mike Ryan shows how @ngrx/entity can be used to write CRUD reducers with little code. It’s great. And much appreciated. However, it doesn’t help with the TypeScript cruft in action declarations.

In the past, I’ve resorted to code generation — using doT — to avoid the usual repetition. More recently, I’ve investigated alternative approaches and I’ve found one that’s terse and suits my needs.

Before I introduce the library I’ve written, let’s look at how TypeScript works with Redux.

TypeScript and Redux

Redux is fundamentally about the dispatch and receipt of actions, and TypeScript has benefits for both.

When dispatching an action, the use of action creators — rather than object literals — is recommended. There are a number of reasons for using action creators — including brevity, encapsulation and testability — but TypeScript offers another: type safety. Strongly typed actions will prevent the omission of required properties, the…