Reactive Angular 2 with ngrx
This course has been updated! We now recommend you take the Reactive Angular with NgRx course.
Table of Contents
The Reactive Big Picture
IntroductionLukas 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.
Challenge 1In 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 1Lukas 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 2Lukas 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 LessonIn 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 2Observables 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 ReduxRedux 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.
Redux DemonstrationLukas 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 2In this challenge, you will identify the major reactive components in the sample application.
Challenge 2 Solution Part 1Lukas 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 2Lukas continues the challenge 2 solution by answering a few audience questions.
Observables and RxJS
Reactive with ObservablesIn 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 OperatorsThere 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 ContinuedScott continues going through code examples for some of the most common RxJS operators. He talks about distinctUntilChanged(), combineLatest(), and flatMap().
Async PipesThe 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.
Observables Demonstration 1Scott 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&AScott 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 2Scott 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 3In 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 SolutionScott walks through the solution to challenge 3.
Immutable DemonstrationScott 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 4In 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 SolutionScott walks through the solution to challenge 4.
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.
ReducersA 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 DemonstrationLukas 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&AAfter 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 5In 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 SolutionLukas walks through the solution to challenge 5.
Reactive Async & Data Models
Asynchronous ServicesReactive 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 ObservablesComplex 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 1Lukas concludes the course by fielding some questions from the audience about components having multiple subscriptions and testing RxJS code.
Final Q&A 2Lukas answers a few last audience questions and reiterate the importance of watching the Getting Started with Redux videos by Dan Abramov.