Angular NgRx: Getting Started

By Duncan Hunter and Deborah Kurata
NgRx is a powerful library for organizing and managing state and interactions with that state in your Angular applications using the redux pattern. This course gets you started with NgRx including a store, actions, reducers, effects, and selectors.
Play course overview
Course info
Rating
(440)
Level
Beginner
Updated
Jun 30, 2020
Duration
4h 14m
Table of contents
Course Overview
Course Overview 2m
Introduction
Introduction 3m What Is NgRx? 4m Why Use NgRx? 5m Getting the Most from This Course 2m Sample Application 3m Course Outline 2m
The Redux Pattern
Introduction 2m Store 1m Actions 1m Reducers 2m Advantages of the Redux Pattern 2m Checklists and Summary 1m
First Look at NgRx
Introduction 2m Demo: Setting up the Sample Application 4m Installing the Store 4m Initializing the Store 4m Demo: Initializing the Store 2m Defining the State and Actions 1m Building a Reducer to Process Actions 5m Demo: Building a Reducer to Process Actions 4m Dispatching an Action to Change State 5m Subscribing to the Store to Get State Changes 5m Checklists and Summary 4m
Developer Tools and Debugging
Introduction 1m Installing the Tools 5m Using the Tools 5m Checklists and Summary 1m
Strongly Typing the State
Introduction 3m Defining Interfaces for Slices of State 4m Extending the State Interface for Lazy Loaded Features 3m Strongly Typing the State 3m Setting Initial State Values 3m Building Selectors 5m Demo: Building Selectors 3m Demo: Using Selectors 1m Composing Selectors 2m Checklists and Summary 2m
Strongly Typing Actions with Action Creators
Introduction 3m Building Action Creators 5m Demo: Building Action Creators 2m Using Strongly Typed Actions 3m Demo: Using Strongly Typed Actions 4m Using Actions and Selectors for Component Communication 5m Demo: Communicating with the Edit Component 5m Defining Actions for Complex Operations 3m Demo: Defining Actions for Complex Operations 2m Checklists and Summary 2m
Working with Effects
Introduction 1m What Are Effects? 4m Defining an Effect 3m Demo: Defining an Effect 6m SwitchMap Versus MergeMap 3m Registering an Effect 2m Using an Effect 5m Demo: Async Pipe 3m Exception Handling in Effects 5m Checklists and Summary 1m
Performing Update Operations
Introduction 2m Identifying the State and Actions 3m Strongly Typing the State and Building Selectors 6m Strongly Typing the Actions with Action Creators 3m Dispatching an Action 4m Building the Effect 3m Processing the Success and Fail Actions 6m Demo: Processing the Success and Fail Actions 2m Checklists and Summary 2m
Architectural Considerations
Introduction 1m Container Presentational Component Pattern 5m Demo: Container Component 3m Demo: Presentational Component 3m Change Detection OnPush 4m Creating a Barrel with Index.ts Files 5m Grouping Related Actions into Separate Files 8m State Modules 3m Checklists and Summary 3m
Final Words
Introduction 1m Recap 4m Additional NgRx Libraries 5m Learning More 1m Closing 1m
Description
Course info
Rating
(440)
Level
Beginner
Updated
Jun 30, 2020
Duration
4h 14m
Description

At the core of state management in Angular is a thorough knowledge of the Redux pattern and the NgRx library. NgRx is a powerful library for organizing and managing state and interactions with the state in your Angular applications following the Redux pattern. In this course, Angular NgRx: Getting Started, you will learn the three principles of the Redux pattern that NgRx follows and the benefits this brings to your Angular applications. First, you will discover how to define a single store for all of your application state, access data from the store with selectors, dispatch actions using action creators, and process those actions with reducers to create new state. Next, you will explore how to handle side effects, such as asynchronous operations, with effects. Finally, you will learn how to architect your Angular applications for scale and performance using the container and presentational component patterns. When you are finished with this course, you will have a foundational knowledge of NgRx that will help you move forward to develop larger or more complex Angular application.

About the author
Duncan Hunter
About the author

Duncan Hunter loves working in awesome teams to make awesome software.

More from the author
Play by Play: Fundamentals of Angular Testing
Intermediate
1h 57m
May 31, 2018
Play by Play: Building Enterprise Angular Apps with Nx
Intermediate
1h 31m
May 22, 2018
More courses by Duncan Hunter
Deborah Kurata
About the author

Deborah Kurata is a software developer, consultant, Pluralsight author, Google Developer Expert (GDE), and Microsoft Most Valuable Professional (MVP). Follow her on twitter: @deborahkurata

More from the author
Angular: Getting Started
Beginner
5h 51m
Jun 9, 2021
Defensive Coding in C#
Beginner
2h 14m
Jan 2, 2020
More courses by Deborah Kurata
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hey, everyone. My name is Deborah Kurata, ‑and I'm Duncan Hunter. ‑Welcome to our course, Angular NgRx: Getting Started. ‑This course gets you started with NgRx, the powerful library for organizing and managing state and interactions with that state in your Angular applications using the Redux pattern. We look at the three principles of the Redux pattern that NgRx follows and the benefits this brings to your Angular applications, such as state management, performance, tooling, and component communication. ‑Next, we implement the pattern. We define a single store for our application state. We dispatch actions and process those actions with reducers, creating new state. ‑We look at the awesome Redux DevTools browser extension to take your tooling to the next level with time travel debugging. ‑We strongly type our state with interfaces and selectors and strongly type our actions with action creators. We end up with a clear and clean set of actions that the tooling uses to help us better dispatch and process those actions. ‑Then we look at effects to deal with side effects and how these can help keep your components pure and more reusable. We go step by step through how to master these complex but powerful observable streams. Lastly, we explore key architectural considerations, including presentational and container component patterns and taking advantage of Angular's change detection strategy called OnPush. By the end of this course, you'll know the basics of using NgRx and the Redux pattern it implements so you can get started using NgRx in your applications. ‑I hope you'll join us on this journey to learn NgRx with Angular NgRx: Getting Started at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT