Table of Contents
Advanced NgRx
The NgRx solar system enables Angular developers to build reactive solutions for managing state, events and data using principles inspired by redux. We’ll quickly get everyone on board before we take off and explore the planets that revolve around the NgRx galaxy. Some of these planets include testing, NgRx Entity, NgRx Data, NgRx Auto Entity, error handling, complex actions and effects, and last but not least, the antimatter of NgRx that will send your ship into a tailspin. This workshop is meant for interplanetary explorers that have visited the NgRx galaxy but are interested in exploring and learning the entire galaxy and even the outer rim.
Quick overview of NgRx basics and best practices
Configuration
Core Module
State Module
App Interfaces
AppState
App Reducer
Creates AppReducerMap using AppState
Store Freeze
State Module
Register Effects
RouterStateSerializer
StoreDevTools
Organization
Nx/Workspaces
State in separate library
Recommended folder structure
Feature modules and state module (small project)
Or
Features modules with state included (large projects)
Rules of Thumb
You probably don’t need NgRx
Consider Service with a Subject
Container/Presenter
Containers
Interact with the store
Pass observable data via async pipe
Receive events from child presenter components
Decide what to do with events/data
Presenters
Received plain data from parent container
Display data and make things pretty
User/System events are raised to parent via emitters
Decisions are deferred
Component is reusable and flexible
Have no knowledge of stores or services
When to create actions?
Anytime we want to interact with the store or API
No shortcuts
Use classes for actions
Use enums for action names
Use big | assignment for action classes
3 action approach - request, success, failure
Consider Action Creators
Never nest your data
Prefer dictionary over arrays (entity library)
Show nested data and reducer example
Use selectors to filter/manipulate your data from the store
Supports parameters
Memomized
Understand how to release
NgRx Libraries
Service with a Subject
You might not need NgRx at all
Using stackblitz, refactor tour of heros
Modify component to use Observable heros
Modify service to use Behavior subject
NgRx Entity
Installation and Introduction
Arrays vs Dictionaries
Entity Enrichment
Loading, error, and other properties
WORKSHOP
Open tour of heros ngrx project in stackblitz
Refactor reducer to use entity
Refactor selectors to use entity
NgRx Data
WORKSHOP: using stackblitz, implement ngrx data in tour of heros
Action Creators
Explain the use case and fundamentals
WORKSHOP: use action creators to create new actions
BrieBug NgRx Schematics
ng add @briebug/ngrx-schematics
Generate
NgRx Auto Entity
Maybe consider pulling this from the workshop
NgRx Facades
Use cases for facades
Refactor Service with Subject to NgRx
Modify service to use NgRx Fascade
NgRx Testing
Jest
Installation and configuration
ng add @briebug/jest-schematic
shouldMatchSnapshot
Clone NgRx repository for testing
Testing Actions
Show simple test
WORKSHOP: write test for parameter based action
Testing Reducers
Show simple test
WORKSHOP: write test for parameter based action
Testing Selectors
Show simple test
WORKSHOP: write test for parameter based selector
Testing Effects
Jasmine Marbles
Hot vs Cold observables
Show simple test
WORKSHOP: write test for error condition
NgRx Advanced Actions/Effects
Action Types
Commands, documents, events
Definitions for each
Effects
Decide how to process action
Map current action to a new action
Multiple actions for an interaction
Handle side effects
Deciders
Basic deciders using ofType
Content deciders that inspect payload
Context deciders that inspect environment variables
WORKSHOP: write effect that inspects payload and environmental variable
Splitters
Takes a single action and splits it into an array of actions
If multiple actions need to happen logic can be moved to a new action to dispatch actions
Useful for adding logging
WORKSHOP: write splitter effect that dispatches new actions and logs
Aggregators
Opposite of splitters
Combine multiple actions back down to a single action
Maybe could use the RxJs reduce operator
Useful when I want multiple actions to complete before moving on to the next step
WORKSHOP: write new effect that aggregates splitter effect back into a single effect
Content Enricher
Takes a current action and maps it to a new action where the payload is modified
WORKSHOP: write enricher effect that reads from the store and append the payload
Normalizer
Reduces multiple action types to a single action type with an enhanced payload
WORKSHOP: write a normalizer to combine insert/update into a single save action
Error Handling
Error as a state
Simplifying error management
LogRocket
Show demo of LogRocket and what it can do.
Walk through setup
Create error situation
WORKSHOP: Create LogRocket account, insert key, run error condition, see failure, step through actions to see the failure
Logging actions/payloads for users
NgRx Anti Patterns
Dive into top 5 ways you’re using NgRx all wrong
Nesting Data
Taking Shortcuts with actions
Questions
At what point do you introduce Nx/Workspaces into your project
If you’re asking the question, then you probably don’t need it.
Inject - test if provided in root messes up lazy loading
Lazy loaded
State inside Feature modules vs State and Feature modules - preference
If two modules/routes want a component/state WebPack will add it to the commons chunk.
ROUTER_NAVIGATION to check for route changes
Last updated