How to get better type checking and code completion support with Typescript in Angular Ngrx reducers or any other Redux-like library

All the code examples in this post are taken from the real world Angular Ngrx Material Starter project in various stages of it’s development

Short recapitulation of Ngrx state library

Ngrx is a state management library which is used to implement one way data flow with centralized state store. Components and services dispatch actions in response to events triggered by user interaction and server communication.

Every dispatched action produces a new application state by triggering corresponding reducer action handler. In the handler we always want to return new object or array to be sure that our new application state is clearly distinct from the old one.

Read more...