Build Redux Style Applications with Angular2, RxJS, and ngrx/store

41 minutes

Angular 2 has many built-in features for working closely with RxJS to help you build fully reactive applications. This course will teach you how to use Angular 2 with RxJS. We will learn how to use the ngrx/store library to manage state in a very clean reactive "Redux style".

This course assumes you've got a working knowledge of Angular 2 and reactive programming with RxJS. If you don't, you might want to watch Angular 2 Fundamentals and this Introduction to Reactive Programming with RxJS. You might also enjoy Step by Step Async Programming with RxJS and this course on Redux by its creator Dan Abramov!

pro-course-rss-logo

PRO RSS Feed

Rendering an Observable with the Async Pipe

Rendering an Observable Date with the Async and Date Pipes

P

Handling Click Events with Subjects

P

Handling Clicks and Intervals Together with Merge

P

Managing State in RxJS with StartWith and Scan

P

Mapping Streams to Values to Affect State

P

Using ngrx/store and Reducers for Angular 2 Application State

P

Dispatching Action Types to Reducers

P

Dispatching Action Payloads to Reducers

P

Passing Template Input Values to Reducers

P

Passing Observables into Components with Async Pipe

P

Adding a Second Reducer to the Store

P

Using Two Reducers Together

P

Using a Reducer to Change an Object's Property Inside an Array

P

Using a Value from the Store in a Reducer

P

Review of Angular 2, RxJS, and Reducers from ngrx/store

P
angular2 tutorial about Rendering an Observable with the Async Pipe

Rendering an Observable with the Async Pipe

2:19 angular2

Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular 2 and then to render it out in the template.

https://github.com/johnlindquist/rxjs-in-angular2/tree/11aa4c29a4536dad0ef26b78d8f7f503e4372f74/src

angular2 tutorial about Rendering an Observable Date with the Async and  Date Pipes

Rendering an Observable Date with the Async and Date Pipes

1:05 angular2 PRO

Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual Dates. We'll still use the Async pipe, but we'll also add on the Date pipe with some formatting to display the Date just the way we want it.

angular2 tutorial about Handling Click Events with Subjects

Handling Click Events with Subjects

1:33 angular2 PRO

While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.fromEvent, a good practice when using Angular 2 and RxJS combined is to use Subjects and push the value through each event so that you can use it as part of your stream.

angular2 tutorial about Handling Clicks and Intervals Together with Merge

Handling Clicks and Intervals Together with Merge

1:36 angular2 PRO

Observable.merge allows you take two different source streams and use either one of them to make changes to the same state of your data. This lesson shows how you can use a stream of clicks and an interval stream and use either one to update the clock.

angular2 tutorial about Managing State in RxJS with StartWith and Scan

Managing State in RxJS with StartWith and Scan

2:23 angular2 PRO

The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves just as a reduce function would, but scan is able to collect values from streams over time. This lesson covers using startWith to set the initial accumulator value then using scan to update the value of the clock from the clicks and interval.

angular2 tutorial about Mapping Streams to Values to Affect State

Mapping Streams to Values to Affect State

1:32 angular2 PRO

While you have multiple streams flowing into your scan operator, you'll need to map each stream to the specific values you need to update your state the way that you want. This lesson covers using the map operator to determine what the click and interval should do when the state is updated.

angular2 tutorial about Using ngrx/store and Reducers for Angular 2 Application State

Using ngrx/store and Reducers for Angular 2 Application State

5:12 angular2 PRO

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular 2 application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

angular2 tutorial about Dispatching Action Types to Reducers

Dispatching Action Types to Reducers

1:21 angular2 PRO

A reducer needs to know what you want it to do whenever it's called. You do this by passing along an action type then the reducer can switch based on the type to achieve the logic you need. This lesson covers dispatching action types to your reducer to update the state based on that type.

angular2 tutorial about Dispatching Action Payloads to Reducers

Dispatching Action Payloads to Reducers

2:00 angular2 PRO

While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. This lesson shows you how to pass an action payload along with your action type to update the state.

angular2 tutorial about Passing Template Input Values to Reducers

Passing Template Input Values to Reducers

2:37 angular2 PRO

Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.

angular2 tutorial about Passing Observables into Components with Async Pipe

Passing Observables into Components with Async Pipe

3:09 angular2 PRO

The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a Component.

angular2 tutorial about Adding a Second Reducer to the Store

Adding a Second Reducer to the Store

2:33 angular2 PRO

Stores can accept as many reducers as you need. This lesson covers adding a second reducer that will be used to control an array of people.

angular2 tutorial about Using Two Reducers Together

Using Two Reducers Together

1:38 angular2 PRO

Reducers can easily be used inside one another to update related state. This lesson shows how you can use the clock reducer inside of the people reducer to create the time for each new person.

angular2 tutorial about Using a Reducer to Change an Object's Property Inside an Array

Using a Reducer to Change an Object's Property Inside an Array

5:05 angular2 PRO

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

angular2 tutorial about Using a Value from the Store in a Reducer

Using a Value from the Store in a Reducer

3:31 angular2 PRO

RxJS allows you to combine streams in various ways. This lesson shows you how to take a click stream and combine it with a store stream to use a value from the store inside a reducer.

angular2 tutorial about Review of Angular 2, RxJS, and Reducers from ngrx/store

Review of Angular 2, RxJS, and Reducers from ngrx/store

3:38 angular2 PRO

This lesson summarizes everything the course has covered and how Angular 2, RxJS, and ngrx/store work together to achive a reactive application.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?