Angular 4 NgRx Store Masterclass & FREE E-Book
4.3 (320 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,948 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 4 NgRx Store Masterclass & FREE E-Book to your Wishlist.

Add to Wishlist

Angular 4 NgRx Store Masterclass & FREE E-Book

Covers Angular 4 (formerly Angular 2) - Learn the Angular Ngrx Store Library, Build a Chat Application
Best Seller
4.3 (320 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,948 students enrolled
Last updated 8/2017
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 8.5 hours on-demand video
  • 3 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a Chat Application From to to bottom
  • Understand the Flux Architecture, its benefits, strong points and most beneficial use cases
  • Understand Single Store Architecture solutions like Redux or Ngrx Store
  • Know all the usual notions of Store solutions, like Actions and Reducers
  • Know how to model the application state of a single store architecture, leveraging Typescript custom types to do so
  • Know the difference between a model and a view model and what to put inside the store
  • know how to derive a view model from a model and how to do that
  • understand the notion of selector in the context of store solutions
  • know the difference between smart components and presentation components
  • know how to build smart components using the Ngrx Store library
  • know how to use the Ngrx Effects library
  • know not only the Ngrx libraries but know also how they all fit together and what are the benefits of a store solution
  • know how to setup the Ngrx store developers tools
  • know how to debug RxJs applications in general
View Curriculum
  • Angular 2 or Above
  • Typescript
  • HTML
  • CSS

In this course we are going to learn the Angular Ngrx library ecosystem, namely everything that revolves around the Ngrx Store and Ngrx Effects library, and store architectures in general.

The course covers the Angular 4 release (the previous release was Angular 2), and consists on building step-by-step a chat application. 

One Of The Most Famous Bugs Of All Time ?

Let me take you through a journey in time. Let's jump on a time machine and go back to 2014: we find ourselves in the Facebook headquarters at Menlo Park. Not only we went back in time, but we found ourselves becoming part of one of the most advanced software development teams in the world.

You might think that the team would be busy adding some new feature, but at our arrival the team is working relentlessly trying to fix one particular bug: something as simple as a counter of unread messages in a chat system.

This is one of those situations that only a developer could understand. The team tries to fix the bug in all sorts of ways, but the bug keeps coming back, month after month ! The counter says that there are several unread messages: the user clicks on the counter and there is nothing there.

Its a super visible bug in the biggest web application in the world: 1.3 Billion users and counting, endless resources to spare, some of the very best software teams in the world.

And yet an apparently simple but highly elusive bug just keeps coming back: a counter is incorrectly calculated: how can this happen ? That's what you will find out in this course.

A Bug That Originated a New Architecture ?

How could such an advanced team with nearly limitless resources struggle to fix a single bug ? As a developer you might find that this situation is really not that surprising; you might have been in a place and time when you had to tell your manager that the application can't be saved: that its so badly written that its needs to be rebuilt from scratch.

If it has never happened to you, it probably will during your development career. You have found an architecture problem in your application: happens to every team.

In this course we are going to understand exactly what was the real problem behind the Facebook counter bug, and learn the new frontend software architecture that it originated: Flux.

This new architecture was presented to the world in a series of talks. Those talks included a demo of the original chat counter problem. Have you ever seen that demo chat application in the third talk of the Flux recommended talks ?  That's what you will be building in this course.

What Will We Build In This Course ?

We are going to build step by step a chat application that reproduces the situation that the Facebook team faced with the unread messages counter. We are going to solve the problem not by using the original Flux dispatcher, instead we are going to use a derived single store RxJs-based solution: The Angular Reactive Extensions Ngrx Store.

We are going to use the Angular CLI to quickly scaffold an application, and implement the frontend of the chat application from scratch: from an empty folder - every line of code will be explained.

The backend will also be explained but we will initially get a running backend as a starting point, so that we focus on the frontend architecture and the store solution.

We are going to build the application using Reactive Programming principles and a set of libraries of the Angular Reactives Extensions (Ngrx) Ecosystem: this will include the Ngrx Store, Ngrx Effects, DB, Router integration.

We are going to cover the benefits of Immutability and OnPush change detection, its advantages and disadvantages.

What Will you Learn In this Course?

We are going to learn how to leverage Typescript to clearly define the domain model, the view model and even transfer models of our application, as well as the application state that goes inside the store.

We are going to learn what types of state are usually kept inside the store, and how they relate to the state in the database. We will learn all the usual concepts of Store architectures: Actions, Dispatching and Reducers.

We will cover the Ngrx Dev Tools including the time-traveling debugger, and we will introduce a small utility library to helps us debug RxJs applications in general. We will cover debugging techniques for our Typescript code in both the client and the server.

We will cover backend API design for frontends that use store architectures: what type of API to design if building an API from scratch, and how to integrate a store with existing APIs.

Course Overview

The course will start with a short architectural overview on the Facebook counter problem, Flux and unidirectional data flow. We will then dive straight into the building of the frontend of our chat application.

Once we have a store solution up and running we are going to introduce the Dev Tools and add more libraries of the Ngrx ecosystem step by step.

What Will You Be Able to to at the End Of This Course ?

The goal of the course is simple: you will be proficient in the Flux and single store architectures and will know when to use a store solution and why, what are the reasons and more common use cases for doing so.

You will be able to use Typescript to model all the data structures needed for the several different layers of your application. You will know how to develop applications using RxJs and the Ngrx Store, understand the concepts related to store architectures and know how to setup the developers tools and use the most important libraries of the Ngrx ecosystem.

Free samples of multiple parts of the course are available.

Who is the target audience?
  • Angular Developers looking to Learn Ngrx Store and its surrounding Library Ecosystem
Compare to Other AngularJS Courses
Curriculum For This Course
90 Lectures
Introduction - The Flux Architecture
3 Lectures 13:43
Scaffolding the Chat Application - Gettting The Most Important Part Right
10 Lectures 45:45
Installing an IDE - Webstorm or Visual Studio Code

IMPORTANT: Using Yarn instead of NPM To Avoid Installation Issues

Installing The Lodash Utility Library

Using the Angular CLI to Scaffold All Application Components

What Should be put inside the Store ?

A Critical Notion For Any UI We Build - Model vs View Model

Using Typescript Custom Types To Define The Application Model

Implement a Simple In-Memory Database, Learn What Goes Inside a Store

First HTTP Call - What is a Transfer Object ?
Introducing A Store Solution - The Ngrx Store, Actions And Reducers
10 Lectures 51:46
Store Concepts Introduction

How To Switch Git Branches During The Course

Getting a REST API Server Running

Installing A Store Solution

Defining The Store Application State - How Many Types Of State Are Th

The Store as an Observable of Application State

Dispatching Our First Store Action

Setting The Store Initial State - Debugging First Action Dispatch

Writing Our First Reducer Function Step By Step

Summary Of How a Store, Actions and Reducers Work
Implementing The Thread Section View Using Reactive Programming
10 Lectures 49:24
Smart Components and Reactive Programming Techniques - Introduction

Building the Thread Section Using Reactive Programming

See How Simple It Is To Implement An Unread Messages Counter Using A Store

A Simple Way To Debug An Angular Program

Defining a View Model - Difference Between View Model and Model

Refactoring the Thread Section Component - Extracting Mapping Functions

Writing The Thread Summaries Selector

Implementing our First Presentational Component - The Thread List Component

Refactoring The Selector Functions of The Thread Section Component

Best Practices for Writing Selector Functions
Ngrx Effects and the NgRx Dev Tools
7 Lectures 31:29
Ngrx Effects and DevTools Introduction

Simplifying Smart Components - The Ngrx Effects Library

Understanding the NgRx @Effect Decorator - How to Use It ?

The Added Value Of Ngrx Effects and How It Simplifies Smart Components

The Ngrx Store DevTools and the Time Travelling Debugger

How to Debug RxJs Code ?

A Simple RxJs Debugging Utility
Implementing the Message Section Smart Component
13 Lectures 01:22:57
Selecting A Thread - Initial Implementation

Understanding Combine Reducers

Writing The Reducing Logic of Select Thread Action

Introducing the Message Section Component

Message Section - Reviewing the Implementation of the Name List Selector

Review of The Messages List Implementation - View to View Model Mapping

Implementation of the Highlight Selected Thread Functionality

Implementation of the Change Selected User Smart Component

Change User Effect Implementation - An Example of a Chain Of Actions

Change Current User Implementation - Backend and Frontend

Implementing the Send New Message Chat Functionality

Implementation of the Send New Message Reducer

Scrolling the Message List To the Bottom Automatically Using OnChanges
Getting The Chat Functionality Up and Running !
14 Lectures 01:27:26
Solving the Facebook Counter Problem - Section Introduction

Implementing The Write New Message Effect Using Ngrx Effects

Send New Message Implementation - Client Part

New Server Branch - View Send New Message In Action

Refresh Chat Messages Side Effect Implementation

Fetch New Messages - Implementing the Reducer Logic

Finish Implementing the Refresh Messages HTTP Service

Implementing The unread Messages Counter Reducing Logic

Unread Message Counter - See The Solution for The Facebook Counter Issue

Marking Threads With New Messages As Unread

Implementing the Mark Messages As Read Reducer Logic

Mark Threads as Read - Demo of The Nearly Completed Chat

Implementing The Mark Messages As Read Side-Effect

Chat Wrap Up - Summary Of The Advantages Of Store Architectures
Finishing Up - Error Handling, Router Integration, Ngrx Store Freeze
6 Lectures 33:06
Error Handling With Ngrx Store - How To Use The RxJs Catch Operator

Implementing the Error Handling Reducer Logic

Displaying Errors On the Screen - Implementing the Messages Smart Component

Immutability In Reducer Functions - How to Use the Ngrx Store Freeze Library

Adding the Angular Router to the Chat Application

Ngrx Store Router Integration - Time-Travelling with the Dev Tools
Performance Tuning - Immutability and OnPush Change Detection
13 Lectures 01:23:08
OnPush Change Detection and Immutability - What Are the Advantages ?

Why Freezing Selector Output Does Not Help Leverage OnPush Change Detection

Understanding How OnPush Change Detection Works And How To Leverage It

How To Write Reducers That Leverage OnPush Change Detection

Refactoring Remaining Reducers - Will This Be Enough To Leverage OnPush ?

Introducing a New Functional Programming Concept - Memoization

Introducting The Reselect Library - How To Create a Memoized Selector

How To Write a Memoized Selector With Reselect - What is The Advantage ?

Using the Lodash Memoize Utility To Optimize View Rendering

Preventing Message Re-Renderings Using a Presentational Component

On Push Change Detection Summary - Smart Vs Presentational Components

High-Level Overview of The ImmutableJs Library

Course Summary and Conclusions
Building A Development Server
4 Lectures 30:29
Building The Get All User Data REST API From A to Z

Running And Debugging Our ts-node Development Server

Calling Our REST API Server From the Client - Configuring the Angular CLI

Bonus Lecture: Learn More About The Angular University And My YouTube Channel
About the Instructor
Angular University
4.3 Average rating
1,482 Reviews
12,357 Students
7 Courses
Learn and Keep Up with The Angular Ecosystem

About the Angular University:

The Angular University aims to be the one place that you  go in order to learn and keep up with the Angular ecosystem. We provide premium quality video tutorials, screencast style.

About the course instructor:

Hello, my name is Vasco  and I'm a Software Developer with 17 years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years.   

I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. And that's just a few of them, please check my Linkedin for extensive recommendations.

I also love to teach, write and talk about technology.  I am looking forward to be your Angular  instructor,

Kind Regards,