Redux introduction with NgRx (part 4): NgRx high level introduction

Redux introduction with NgRx

This article is part of the serie of articles that you may want to read before starting this one.

Here is the summary:

1. Store & Application State
2. Redux Principles
3. Redux core concepts
4. NgRx high level introduction (you’re here)
5. NgRx syntax explained

NgRx

NgRx is a set of tools for doing Redux pattern state management implementation into your application. These tools are specifically tailored for the Angular ecosystem.

NgRx introduction

What is ngrx/store? This is a Redux inspired reactive state management. Reactive refers to Observable streams, this library gives us essentially the Redux pattern on steroids powered with the RxJS library.

ngrx/store is:

• Based on the Redux pattern;
• Written completely in Typescript with Observables;
• Made for Angular (specific implementation);

Because NgRx is a set of tools, we have much more than ngrx/Store. We have multiple things:

• ngrx/store — RxJS powered state management for Angular applications, inspired by Redux;
• ngrx/effects — Side Effect model for ngrx/store to model event sources as actions;
• ngrx/router-store — Bindings to connect the Angular Router to ngrx/store;
• ngrx/store-devtools — Store instrumentation that enables a powerful time-travelling debugger.
• ngrx/entity — Entity State adapter for managing record collections;
• ngrx/schematics — Scaffolding library for Angular applications using NgRx.

Benefits of using ngrx/store

The first of the benefits is the single source of truth, which is provided by the implementation of the Redux pattern. All the states of our application is represented and contained in a single Object tree.

The immutability. The ngrx/store library enforce the use of an immutable state tree, preventing you to mutate the state.

The testability. Most of the things in ngrx/store are using pure functions, which are easier to test. The libraries tend to give you helpers to test your code too which is pretty neat.

The performance benefits, why? Because in an immutable environment, you can actually use a really neat feature which is ChangeDetectionStrategy.OnPush. More information about that can be find here and the official documentation is here.

The Root and feature module support. The ngrx/store library is compatible for enabling multiple parts of your Application State either eagerly AND lazily. It is all handled.

Reactive component architecture

When using the ngrx/store library, you will encounter multiple pattern, but the most important is the Reactive Angular, or the separation between type of components.

Reactive Angular is a pattern that gives you some guidelines on how to classify and what type of component you can create.

When implementing the Reactive Angular pattern we have “Container” type (or “Smart”) components and “Presentational” type (or “dumb”) components that will cohesively create and manage your application components flow.

The container component is:

• Aware of the Store: The Store service is injected into the class’ constructor and is available in the component;
• Dispatches Actions: Because the components has access to the Store logic, it can dispatch actions to require some state changes;
• Reads data from Store: Again, with the Store service, the component has access to the selectors that enable it to target a specific part of the State tree to render its data.

The presentational component is:

• Not aware of the Store: There is no injection of the Store service here;
• Invokes callbacks via @OutPut;
• Read data from @Input.

The presentational components are just using vanilla Angular and are not aware of any state management system / library. Contrary to the container component that makes the communication to the Store and reacts accordingly.

The container components are the home of presentational components. They make the bridge between the emitted event of a presentational component to the emission of the Action and the selection of the part of the state needed by these components.

Presentational VS Container components & Store

See you in “NgRx syntax explained”.