Become a Master
This course and others like it are available as part of our Frontend Masters video subscription.
Reactive Angular 2 with ngrx
Lukas Ruebbelke
Author of AngularJS in Action
Reactive programming has affected every major modern web framework and fundamentally changed how we approach web applications. Angular 2 has embraced this brave new world and in doing so, gave us a great platform for building out functional, reactive web applications right out of the box. Add in the Redux inspired library, @ngrx/store and combine that with the power of observables and you have yourself a serious programming arsenal. Learn how to build web applications with ngrx in the reactive paradigm in this course!
Published: June 1, 2016
Table of Contents
The Reactive Big Picture
Introduction
Lukas begins the course on Reactive Applications with Angular 2 by outlining the course topics and sharing links to the sample application and other code examples. The overall goal of this course is to understand how to build fully reactive features in Angular 2. - http://bit.ly/fem-ng2-ngrx-app , http://onehungrymind.com/fem-examplesChallenge 1
In this challenge, you will download the run the example application. You will also wire up the widgets component to the widgets-list and widget-details component and connect the widgets service.Challenge 1 Solution Part 1
Lukas begins walking through the solution to challenge 1. In the first part, he adds the @Input and @Output decorators and verifies the data is source is working.Challenge 1 Solution Part 2
Lukas continues walking through the solution to challenge 1 by connecting the service. He also takes a few minutes to field some audience questions.Angular History Lesson
In Angular 1, named routes or directives could be used to break a larger application into smaller and more manageable pieces. Angular 2 has a single solution: Create components. Lukas compares these architecture approaches and talks about why managing state in an application can be difficult.Why Reactive?
In the context of this course, reactive programming is when an application “reacts” to data over time. The Observable Pattern is the foundation of this approach. When it’s combined with the Iterator Pattern, the product is an observable sequence with the ability to be notified and iterate though changes in state.Reactive Angular 2
Observables are a core part of the Angular 2 framework. Async pipes are used to bind to observables and immutability alleviates the burden of change detection. After talking about how reactive programming in Angular 2, Lukas shares a couple simplified code examples of observable sequences and the pipe operator.Enter Redux
Redux is a library and a pattern which dictates there is a single immutable state tree and it is not managed in separate controllers and services. State flows down from the reducers and events bubble up from the individual components. - https://egghead.io/series/getting-started-with-reduxRedux Demonstration
Lukas spends a few minutes looking through some sample code inside the project. He looks at how the Items feature is implemented and the redux patters it uses across the different component parts.Challenge 2
In this challenge, you will identify the major reactive components in the sample application.Challenge 2 Solution Part 1
Lukas walks through the first part of his solution to challenge 2. He explains the interactions between the item component and the item store.Challenge 2 Solution Part 2
Lukas continues the challenge 2 solution by answering a few audience questions.
Observables and RxJS
Reactive with Observables
In the observer pattern, an object (called the subject) maintains a list of its dependents (called observers). These observers are notified automatically of any changes in state. After giving a brief explanation of observers, Scott introduces the RxJS library and shares a basic code example that uses a few of the RxJS operations.Most Common RxJS Operators
There are many operators available inside the RxJS library. Scott goes through some code examples for a few of the most common operators. He starts with map(), filter(), scan(), and debounce().Most Common RxJS Operators Continued
Scott continues going through code examples for some of the most common RxJS operators. He talks about distinctUntilChanged(), combineLatest(), and flatMap().Async Pipes
The async pipe resolves asynchronous data directly in the template. It skips the process of manually subscribing to an async method in the component. After looking at a simple code example that uses an async pipe, Scott answers some audience questions about using observables vs. promises with a single HTTP requests. Scott also shares the Rx Marbles website which provides interactive diagrams of Rx observables. - http://rxmarbles.comObservables Demonstration 1
Scott begins live-coding a more practical example that uses RxJS operators. He subscribes to a stream of data from an input text field. Later, he uses the input text to make an asynchronous GET request using the fetch API.Observables Demonstration Q&A
Scott spends a few minute answering audience questions about the observables example he just created. He also explains the need for the flatMap() operator.Observable Demonstration 2
Scott live-codes another example the detects double clicks from a button. He utilizes the buffer() operator to add some lossless back-pressure to the stream. If more than two clicks are detected within the buffer, he displays the number of clicks on the page.Challenge 3
In this challenge, you will convert any Observable.toPromise call to use an observable instead. You will also apply the Observable.map() and Observable.filter() methods to your stream.Challenge 3 Solution
Scott walks through the solution to challenge 3.
Immutable Operations
Why Immutable?
Immutable code is beneficial because it simplifies application development. The code does not contain any defensive copying and it is easier to test. Scott talks about the JavaScript methods that can be used to avoid Object and Array mutations. He also shares a code example that uses the redux pattern to avoid immutability.Helpful Immutable Tools
Scott looks a few tools that make writing immutable code easier. He talks about Object.freeze and deep-freeze (which is a recursive version of Object.freeze). He and Lukas also share some thoughts on an ESLint plugin that disables all JavaScript mutations and discuss why that may not be as restrictive as it seems.Immutable Demonstration
Scott demonstrates how to write immutable code using various Array methods. He first creates CRUD operations for an Array and then compares them to similar operations applied to an Object. Scott uses babeljs.io for this demonstration to showcase how some ES6 features look when compiled into ES5 code.Challenge 4
In this challenge, you will create immutable methods in the widgets service to create, read, update and delete the widgets collection. - This is only a 10 second video, but I figured I’d still break it up since it follows the format of all the other challenges. If it’s going to be too short or seems weird, we can just combine it with the Challenge 4 solution video.Challenge 4 Solution
Scott walks through the solution to challenge 4.
Reactive State
Redux & @ngrx/store
@ngrx/store is an RxJS-powered state manager for Angular 2 applications. It operates on the same principles as redux but is slightly different since it uses RxJS. The “store” can be thought of as the “database” of the application. State manipulation happens in a reducer which is registered in the store.Reducers
A reducer is a method that takes in the current state and an action. Based on the action, the reducer will return a new state. Reducers and their initial state are registered in the application with provideStore. After talking about reducers, Lukas demonstrates how the store.select() and store.dispatch() methods are used.State Demonstration
Lukas uses the code in the sample application to demonstrate how a reducer is created and used inside the Items component. He looks at the boilerplate code for the typical CRUD operations and talks about how provideStore is used to register the reducer.State Demonstration Q&A
After looking through the code in the sample application, Lukas spends some time answering audience questions about reducers and how data flows through the application. Hey also stresses the importance of learning the basics of the redux pattern.Challenge 5
In this challenge you will create a reducer for the selectedWidget. You will register the reducer with provideStore and use the store.select and store.dispatch methods.Challenge 5 Solution
Lukas walks through the solution to challenge 5.
Reactive Async & Data Models
Asynchronous Services
Reactive operations that are asynchronous can be delegated to a service that is responsible for dispatching the appropriate event to the reducers. After talking about some use cases for asynchronous services, Lukas walks through a brief code example.Computed Observables
Complex observables can be composed from multiple observable streams using the Observable.combineLatest() method. This type of “computed observable” will receive updates anytime one of the streams is changed. Lukas looks at two different code examples that include computed observables.Final Q&A 1
Lukas concludes the course by fielding some questions from the audience about components having multiple subscriptions and testing RxJS code.Final Q&A 2
Lukas answers a few last audience questions and reiterate the importance of watching the Getting Started with Redux videos by Dan Abramov.