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?

Composing Selectors

We already saw how to compose selectors when we build the getShowProductCode selector in previous section. However, we can combine selectors further. Lets see an example below

This selector uses array’s find method for selecting current product based on product id.

We’ll finish this post at this point and will continue our learning in next article.

The source code of this application is available on this git repository and online deployed application can be accessed from this URL.

Check Lists

Check List – Strongly Typing State

• Define an interface for each slice of state.
• Compose those interfaces to define the global application state.
• Use these interfaces to strongly type the state throughout the application.
• To aid predictability, provide initial state for each slice.

Check List – Selectors

• Build selectors to define reusable state queries.
• Define a feature selector for feature slice of the sate.
• Use a general selector to return any bit of state from store using selectors composition.

Summary

In this post we strongly typed our state using typescript interfaces which benefits from static type checking and code intellisense. We can compose these interfaces to define the whole application state.

We covered how to build and use selectors which provides a nice abstraction between our store structure and component and how we can compose selectors to have fine grained control on every bit of state information.

Let me know if you have any comments or questions. Till next time, happy coding.