NgRx – Strongly Typing the State and Building Selectors

Introduction

In an introductory post we started with the basics of NgRx.

We covered the first steps towards centralized state management for our application using NgRx which is Redux pattern tailored for Angular.

We installed the NgRx store and wired-it up in our application. We saw, how we can structure our application state in small slices for easy maintenance using Feature Module State Composition.

Today we’ll take next step and strongly type our application state. We’ll also see how to build and use selectors to select any bit of state information from our state slices.

Strongly Typing the State

Following is the code from previous post:

Notice that we are using any for the generic store type. We can improve this by using typescript interfaces to strongly typing our state.

Basically, we can have multiple interfaces defined for each slice of state and then we can define one interface which composes all these states.

But first lets just focus on products slice of state. First question, where to define these interfaces for state?