As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

State management is one of the most challenging aspects of building any non-trivial application regardless of the framework. Most developers do a pretty good job of achieving significant functionality through stateful services in an Angular application but find that things get really complicated really fast. In this course, we are going to learn how to convert an Angular application using stateful services to using ngrx for state management. Through this process, we will learn how to set up the ngrx store for a feature, build out the reducer, use typesafe actions, manage collections with ngrx entity, query our state with selectors, use effects for async operations, level up our HTTP calls with NRWL Data Persistence, handle relational data with selectors and hide ngrx implementations details with the facade pattern. 

Course Overview: Reactive State Management in Angular with ngrx

The first step to migrating to state management with ngrx store for a feature is to instrument that feature with a basic reducer and then wire it into the top-level reducer which is registered with an Angular module. In this lesson, we are going to show how to define the shape of your feature state with an interface, define initial state and then set up the most basic reducer possible to work with the store. We will then add our newly minted reducer to the top-level reducer which then registers it with our state module. From there, we will modify our feature component to hydrate itself from the store and not from a service call. 

Set Up ngrx Store for an Application Feature

The benefits of adopting redux to handle state management in your application will become suddenly and almost magically apparent the second you have to debug your application with the Redux devtools extension. The best part is that we can leverage devtools in our ngrx Angular application in just a couple lines of code. In this lesson, we are going to take a quick tour on how to set up devtools in your application and how to use it to examine action objects, application state, and even time travel. 

Integrate Redux devtools into an ngrx Angular Application

The ngrx store is responsible for storing application state while the reducer is responsible for managing how it that state manipulated. In this lesson, we are going to build out the feature reducer to handle basic operations like `select`, `create`, `update`, and `delete`. We will discuss how actions flow into a reducer and how operations in the reducer must be immutable. From there, we will replace the service calls within our feature component to dispatch the equivalent action objects for consumption within our reducer. 

Manage Data in the ngrx Store through a Reducer in Angular

Actions in an ngrx application are fundamentally very simple with a `type` property and usually a `payload` property. As a result, actions can be expressed as object literals with their types being nothing more than a simple string. This presents some serious logistical challenges as your application starts to grow in complexity by increasing the chance of action type collisions and opaque information when it is time to debug. This is where strongly typed action objects come into play as we replace our generic action objects with typesafe actions that pull their types from a strongly typed enum with clear information about what that action does. We will see how this makes our application a lot more readable and gives us better information in our developer tools.

Dispatch Strongly Typed Action Objects to an ngrx Store in Angular 

Data manipulation on collections can be expensive because it is usually necessary to iterate over the collection at least once to perform any kind of update or selection to it. A common pattern for avoiding expensive iterations is to break a collection into a key-value store that allows for instantaneous lookup of value provided you have the key. We could handle this data transformation ourselves but ngrx entity was created to do all the heavy lifting for us. In this lesson, we will see how to update how we define our feature state to use `EntityState`, create an `EntityAdapter`, define our initial state using our adapter and most importantly, how to leverage the convenience methods that the adapter gives us in our reducer. We will also examine how ngrx entity changes the shape of our state by splitting our collection into `ids` and `entities` and how to update our feature selector to work with it. 

Simplify Collection Management with ngrx Entity in Angular

Transforming data from the store so that it works in our feature components can be a bit clunky and certainly not something that we would want to repeat for every single component that consumes state. Thankfully we have the ability to predefine specific "slices" of state that we want to query from the store and express them in the form of ngrx selectors. Selectors are essentially functions that take state as an input and returns the part of the state that we want in the shape we require. In this lesson, we will build out some basic low-level selectors at our feature reducer as we utilize some very helpful selectors that ngrx entity provides for us right out of the box. We will then create high-level selectors at our top-level reducer that can be consumed across our application and see how it makes selecting state from our state so much easier to read.

Simplify Querying for State with ngrx Selectors in Angular

Once a developer has wrapped their mind around redux and how it maps to ngrx in their Angular application, usually the very next question that comes up is "Great! Now how do I handle operations that need to do something asynchronous like save data to the server first?" This is a great question and neatly solved with ngrx effects. Ngrx effects give us the ability to handle operations that involve side effects by operating as middleware in our application as it sits between our components and our reducers. In this lesson, we will see how to properly sequence ngrx effects by splitting our actions into a trigger action and a completed action. This allows the trigger action to initialize an ngrx effect sequence and then hand off the end-result via a completed action. The beautiful thing about ngrx effects is that it gives us a very tidy place to capture complex business logic into observable streams that we can use to coordinate complex control flow scenarios.

Handle Async Operations with ngrx Effects in Angular

Communicating with a remote server via HTTP presents an extra level of complexity as there is an increased chance of race conditions and the need for error handling. There is also the tricky problem of how to handle the user experience as the application is trying to complete the remote request. NX Data Persistence is a library that works with ngrx effects to give us a better way to handle remote server calls as well as improving on the overall shape of the effect itself. In this lesson, we are going to convert our stock effects to use NX Data Persistence and the advantages of doing so by using `fetch`, `optimisticUpdate`, and `pessimisticUpdate`. We will also see how it gives us a neat division in our effect to handle the sequence we want to run as well as any errors that should arise in the process. 

Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular

Redux, and by extension ngrx, generally promotes a normalized data structure with each distinct entity in the domain model being segmented into its own reducer. This is all well and good but what happens when you have two entities in your application that are related and you need to display them together as a single data structure in your application? Outside of asynchronous operations, handling relational data can be one of the most challenging aspects when learning ngrx. Not only can we use selectors to query state from our store but we can use them to dynamically compute data on the fly as it is consumed by our components. By exposing our high-level selectors at our top-level reducer this makes it easy to combine selectors from related entities and transform and return data to our components. In this lesson, we will start off with a simple example of how to use a selector to produce computed data based on a condition and then move on to how combine related entities in a single selector.

Connect Related Angular Data  Models with Computed Data using ngrx Selectors

Extracting away the implementation details of ngrx from your components using the facade pattern creates some interesting possibilities in terms of iteratively migrating an application to ngrx. By decoupling your components from ngrx completely, this also makes testing and collaboration a lot easier. In this lesson, we will finalize our application by creating a facade to sit in between our component and ngrx and hide all of the ngrx implementation details away from our component. This has an added benefit of reducing the number of pieces that we need to export in our state module's barrel roll by reducing our dependency down to a single facade.

Reactive State Management in Angular with ngrx

Instructor

Course content (11 lessons)

Instructor