
## 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.

## Prereqs

Attendees should be familiar with the following technologies:

- TypeScript
- Angular
- Basics of RxJS


NgRx enables you to build applications that react to new state that is pushed into the Store. Combined with the power of RxJS our applications can efficiently provide a rich user experience.

Build reactive applications in Angular with NgRx

Angular components have inputs and output, handle state transitions, and perform side effects. Using this same mental model we can start to understand NgRx.

Demystify NgRx - you already know NgRx!

Event storming enables you to start designing the actions as a result of events in your application before writing a single line of code. Combined with good action hygiene and you'll be building performant, and easy to debug, Angular applications with NgRx.

Event storming and good action hygiene

You'll learn how to define reducers to immutably producing new state. You'll also learn that reducers are pure functions, so we'll never perform any side effect in our reducers.

Handle state transitions

Defining and composing selectors enables you to efficiently query for data in the Store.

Compose selectors

The Effects library from NgRx enables you to perform a side effect as a result of a dispatched action. You'll be using effects to load data from services into the Store.

Perform Side Effects

NgRx In One Day


## 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

## Prereqs

Attendees should be familiar with the following technologies:

- TypeScript
- Angular
- Basics of RxJS


Collections of entities is a common pattern, and NgRx provides a set of basic state operations and selectors to manage collections in the Store.

Manage collections of data in the Store

Meta-reducers are not widely understood and often rarely used. You'll be able to leverage meta-reducers to intercept actions and change the control flow of the Store.

Harness the power of meta-reducers

Choosing the correct operator in RxJs is hard. Combine that with writing effects that can contain race conditions, and it's even harder to get this right. We'll break down the 4 common higher-order mapping operators and give you a clear path for choosing the correct one in each situation.

Finally master higher-order mapping operating in RxJS

NgRx In Two Days


## 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


Using the component store as a reactive state container for reusable components will enable you to write components that have the single responsibility of the view layer and yet are highly reactive and easy to debug.

Use the Component Store

You'll be a testing pro by using a blackbox testing strategy to ensure that your reducers are producing the expected state as a result of dispatched actions.

Test Reducers

There is a lot of noise out there on how to test effects. Forget everything you've read. You'll be effectively writing tests that will make you want to actually write tests for your effects.

Test Effects

Components do not live in isolation. You'll be using tooling provided by NgRx to mock the Store and test connected components that use NgRx.

Expert Led NgRx Workshops

NgRx In One Day

NgRx In Two Days

NgRx In Three Days

Get Expert Led Training For Your Team