Training »
State Management with NgRx
Content length: approx.
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.
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
- Hands-on workshops
- Background in RxJS
- Complex, realistic examples - real scenarios and how to express them optimally with NgRx
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
Proven results
We've trained thousands of developers at companies like yoursWho Should Attend?
Angular developers already using NgRx, as well as those considering NgRx among alternatives for state management.
You must be familiar with:
- Angular
Bring your computer---this is a hands-on workshop
Topic outline
- Introduction and background
- Oasis Digital introduction
- Student introduction
- TypeScript, the language used throughout
- NgRx overview
- State management combined with event handling
- Component Interactions Without a State Management Architecture
- Inputs and Outputs Allow Fundamental Interaction
- Template Variables Allow Sibling-to-Sibling Interaction
- @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 @ngrx/store
- 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
- Initialization Effects
- Other Lifecycle Hooks
- Registering effects in the NgModule
- Using Effects for non-Action Events
- Testing @ngrx/effects
- 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
- Immutability Libraries
- 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
- Just store state in variables
- Discussion, Q&A
Meet your instructors
Your instructors will depend on your custom requests, availability, consulting needs, etc.
Private group classes
For corporate groups and other organizations, we offer live in-person or online events. Our instructors adapt the agenda to match your needs. We can include consulting assistance, or combine topics into a longer workshop week.
Training FAQs
- 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's conducted by our expert instructors in real time. The instructors answer questions, assist students, etc. We strive to offer as much of the in-person experience as possible, online.
- Q: Can the content be customized?
- A: For private team classes, we *always discuss your goals, the class contents, any specials areas for extra coverage, etc. in advance. We customize both the contents and length (number of days) to your needs.
- 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 carefully assign the right developer/trainer to your class, for a good experience and knowledge match. Please contact us to arrange a date.