NgRx In Three Days Workshop

Day One

1. Reactive Programming in Angular
2. Demystifying NgRx
   1. You already know NgRx!
   2. NgRx mental model: state flows down, changes flow up
   3. Single responsibility principle
   4. Indirection between consumers of state, how state changes, and side effects
   5. Select and dispatch are special version of @Input() and @Output()
   6. Delegate responsibilities to individual modules of code
3. NgRx Actions
   1. A unified interface to describe events
   2. Just data, no functionality
   3. Has a type property at a minimum
   4. Good action hygiene
   5. Event storming
4. Reducers
   1. Reducers produce new state
   2. Reducers receive the last state and next action
   3. Reducers listen for specific actions
   4. Reducers are pure function that perform immutable operations
   5. Setting up the Store
5. Selectors
   1. Selectors allow us to query for data
   2. Selectors are recomputed when their inputs change
   3. Leverage memoization for performance
   4. Selectors are fully composable
6. Effects
   1. Effects are processes that run in the background
   2. Effects connect your app to the outside world
   3. We often use effects to talk to services.
   4. Effects utilize an RxJS actions stream.

Day Two

1. Advanced Effects
   1. Choosing the correct RxJS operator to use with effects
   2. Using mergeMap() to subscribe immediately with no race condition
   3. Using concatMap() to subscribe after the last Observable completes
   4. Using exhaustMap() to discard until the last Observable completes
   5. Using switchMap() to cancel the last Observable if it has not yet completed
2. Effects Examples
   1. Using effects with intervals
   2. Using effects with WebSocket connections
   3. Using effects with Angular's HttpClient service
   4. Using effects to show failure state
   5. Using effects to display modals
3. Entities
   1. Working with collections should be fast
   2. Collections of entities is very common
   3. Entity library provides a common set of basic state operations
   4. Entity library provides a common set of basic state derivations
4. Meta-reducers
   1. Meta-reducers intercept actions before they are reduced
   2. Meta-reducers intercept state before it is emitted
   3. Using meta-reducers to change control flow of the Store

Day Three

1. Component Store
   1. A reactive state container for components
   2. Conceptually similar to the global Store library with selectors and effects
   3. Built to share state for reusable components
2. Testing Reducers
   1. Using a blackbox strategy for testing reducers with actions as inputs and selectors to validate output
   2. Testing sequences of reducers using Array.prototype.reduce()
3. Testing Effects
   1. Use observer-spy to subscribe to and get the last value from an Observable
   2. Using provideMockActions to setup a mock observable of actions
   3. Mocking service calls using Jest
   4. Asserting the dispatched actions from both the happy path and failure path
4. Testing Connected Components
   1. Testing components by interacting exclusively with inputs, outputs, and the DOM
   2. Using provideMockStore and injecting a mock of the Store object
   3. Testing connected components subscriptions and action dispatches

Prereqs

Attendees should be familiar with the following technologies:

• TypeScript
• Angular
• Basics of RxJS