State management can be a vexing question in Angular development, and
Angular itself provides many solutions. For many kinds application state,
though, the leading solution is an Angular add on:
NgRx combines a state management storage system with a messaging system to
enables your Angular components and services to share reactive data across your app.
At Oasis Digital, we’ve used NgRx in great depth across numerous projects
since 2015 and have introduced countless students to NgRx in our popular
Angular Boot Camp. Our NgRx class more fully explores the power of NgRx to
reveal its full benefits. This class includes:
Expert explanation and discussion
Clear, isolated examples for precise understanding
Background in RxJS
Complex, realistic examples - real scenarios and how to express them optimally
Students will learn:
When and how to use ngrx/store's actions, reducers, and selectors to manage state
When and how to use ngrx/effects to handle side effects, including prompting
for user confirmation and processing backend results
When and how to use ngrx/router-store to respond to navigation events
When and how to use ngrx/entity to simplify managing record collections
How to write immutable code to prevent data staleness and corruption
Who Should Attend?
This class is suitable for Angular developers already using NgRx, as well as
those considering NgRx among alternatives for state management.
Prerequisites / requirements
Several months of experience with Angular
Editor and other tools to work on TypeScript source code
A computer—this is a hands-on workshop
Ability to install software, including Node, NPM, and packages
We have trained thousands of developers at hundreds of companies,
including numerous global leaders.
Introduction and background
Oasis Digital introduction
TypeScript, the language used throughout
State management combined with event handling
Component Interactions Without a State Management Architecture
@ViewChild and @ViewChildren Allow Parent Components to call Children
Managing State Outside of Components in Vanilla Angular
Routing Supports Sharing State Through the URL
Reactive Forms Provide RxJS-Powered Validation and Reaction
Services can Hold and Share State for Far-Flung Components
Using Actions to Dispatch Events to the State Machine
Flux and Redux - the Inspirations for NgRx
Reactive programming (RxJS)
Key Figures in the NgRx World
Store - the Single Source of Truth
State - Define the shape of the Data in your App or Feature
Actions - The "Broth of the NgRx Soup"
Reducers - The Only Way to Change State in the Store
Pure Functions - Avoid Side Effects and Simplify Testing
Registering Root Reducers - Defining NgRx in your NgModule
Registering Feature Reducers - Lazy-Loading State
Meta-Reducers - Special Super-powered Reducers
Selectors - Subscribing to the Store for Values and Updates
Memoization - A Mini-Cache for Store Subscriptions
Extract Compound State with Deriver Selectors
Passing Data into a Selector
Testing Projector Functions on Selectors
Jasmine and Karma vs. Jest
Store Devtools - Time-Travel Debugging
Handling Side Effects with @ngrx/effects
Defining Effects for Asynchronous Processes
Non-Dispatching Effects - When You Just Want to React
Other Lifecycle Hooks
Registering effects in the NgModule
Using Effects for non-Action Events
jasmine-marbles for complex effects
Injecting Actions can be Simpler with provideMockActions
Inject Values and Schedulers by Writing Effects as Functions
Test the @Effect decorator with getEffectsMetadata
Router Store - Responding to Router Events
Installing Router Store
Configuring Router Store
@ngrx/entity - Reduce 'Boilerplate' for Certain Shapes of Data
EntityAdapter - A Generic Adapter for Entity Data Operations
ngrx-data - A Further Simplification
Immutability - Protect Your Data from Yourself
What is the Risk?
Using Spread Operators for Shallow Copies
Readonly - TypeScript Compile-Time Protection
Object.freeze(...) and ngrx-store-freeze
Immutable.js Record Extension
Immer - A new alternative
NgRx Facades - A Pattern to Hide Complexity
Alternatives for state management
Just store state in variables
SHARI - mnemonic to guide your state approach
Just use RxJS
angular-redux - wrapper to use the original Redux
NGXS - Snapshots, Decorators, reducers blended with effects
MobX - more magic
Oasis Digital instructors have extensive experience with both
Angular and numerous surrounding technologies. Here are some
of them; for private classes, the specific instructor(s) for your
class will be
selected based on your organization's specific needs and tweaks
to our outline above.
Q: Is this taught "in person"?
A: We offer training both in-person and online via remote conferencing.
Q: How does the remote option work?
A: Much like an in-person class, it is conducted by our expert trainers, in real time.
The trainers can answer questions, assist with trouble students are having, etc.
We strive to offer as much of the in-person experience as possible, online.
Q: Are there open enrollment public classes?
A: We currently only offer an open-enrollment "public" class for our flagship
Angular Boot Camp.
Q: How does the recorded class work?
A: In a recorded class, the biggest obstacle is the lack of live question-and-answer
To deliver a great result, we practice teaching with live groups before
creating the recorded class. In this way, we aim to answer as many of the common
(and less common) questions as possible. We also do as much "live coding" as makes
sense for the topic, in a recorded class.
Q: Can we schedule a private class any time?
A: Our classes are taught by developers who use the subject technologies in their daily work,
so we don't assign "any" available developer/trainer to any particular class,
but only to classes with a strong experience and knowledge match.
Please contact us to arrange a date.
Training for your team, available now
For corporate groups and other organizations, we offer live, in-person instruction.
These teams typically have advanced needs and are looking for hands-on assistance,
so for larger groups we send two expert instructors. Each private class is preceded
by a technical discussion so that we can understand your needs and customize the
content to deliver maximum value.