Functional Reactive Programming is an idea that applications can be built around streams of events happening over time. The structure TypeScript imposes provides a declarative syntax that gives semantic meaning to the streams we use to build application state. Type systems can also feel cumbersome and in the way, but we can cut through the boilerplate required using NgRx.

We’ve heard that using TypeScript can help us avoid painful bugs programmers commonly run into when writing JavaScript by type-checking our code. One of purposes of TypeScript is to “statically identify constructs that are likely to be errors”. With NgRx we can take advantage of this type safety by using TypeScript classes as action creators with readonly type properties, so we can then infer the action object types in our state management code.

NgRx provides a structuring mechanism for larger applications; it’s a design pattern teaches you how to think. In this pattern, the developer needs to identify the streams of values the application is interested in and how they are combined to produce meaningful information for the view layer. The streams, the various applications states, and the view layer models are what we are setting out to define when we use Redux-style state management. This talk will show how to use the various NgRx reactive libraries for Angular state management to build out our application streams and then consume them in our components and services.