NgRx In Depth (Angular 7 and NgRx 7, with FREE E-Book)

• Just a little bit of Angular and Typescript

Description

Why a Store Architecture? (note: this course includes the Typescript Jumpstart E-Book)

One of the most pervasive problems that we will come across as frontend developers are state management issues. These tend to show up eventually in larger applications where we have multiples components that need at the same time display and modify the same shared data, in different points of the component tree.

In these situations, it’s not possible for only one component to load and own a reference to the data, because that data is needed in other parts of the application that the component is not directly linked to.

We would like our view layer to simply update itself automatically whenever the common shared data gets updated by any of the components that are consuming it, without having to create dependencies between those components or calling the server again just to get the latest data and update the view.

Besides the problem of sharing common editable data between components, we want to give our users the best possible experience. We want the application to work as fast as possible, minimizing the need for continuously showing loading indicators to the user, especially if it’s only to keep loading the exact same data from the server over and over again due to router navigation.

This leads to another problem to consider: in an application with a large number of users we would like to minimize the number of API requests that the application makes, in order to allow it to scale more effectively.

Reducing the number of API requests is also important if our application is built on top of a Pay as You Go platform like Firebase or Amazon AWS, where the billing is done per bandwidth consumed.

These design problems are fundamental to UI design and pervasive, but the good news is that all of these are very common architectural problems can be solved in one go using a very elegant architectural solution: the centralized store design.

Course Overview

In this course, we are going to cover in-depth the most commonly used Angular implementation of the centralized store design: we are going to cover the Ngrx Angular Reactive Extensions library ecosystem.

Ngrx is a set of related libraries that together provide a complete solution for implementing a store solution in Angular. We are going to cover Ngrx Store, which contains the reactive store system similar to Redux which is the heart of the store solution.

We are also going to cover Ngrx Effects in-depth, which is a fundamental part of the store architecture as well. We will cover Ngrx Entity which is a practical solution for storing collections in the store.

We will also show how to setup step-by-step the Ngrx DevTools, including the Router Store module, and we will scaffold a good part of our store solution using Ngrx Schematics and the Angular CLI.

What Will You Learn In this Course?

By taking this course you will become comfortable with the centralized store solution in general, and with the Angular Ngrx implementation of that design in particular.

You will feel comfortable designing new Application features using the store design, using a simple methodology and you will know in-depth the complete Ngrx library ecosystem: including Ngrx Store, Effects, and Entity libraries.

You will know how to quickly scaffold parts of the solution using Ngrx Schematics, and how to set up the Ngrx DevTools from scratch, including the router integration.