NgRx Fundamentals

https://www.pluralsight.com/courses/ngrx-fundamentals

by Duncan Hunter

Module 1: Course Overview

1. Course Overview

Module 2: Introduction

1. Introduction
• ngrx allows you to manage state in angular
• Purpose of NgRx
• Managing global and local state
• Isolation of side effects
• Entity collection management
• Integration with the Angular Router
• Developer tooling
• different types of state: Persisted state, URL state, Client state, Local Ul state
2. What Is NgRx?
• describes Actions, Reducer, Store in ngrx
• there is an optional NgRx library called componentStore for managing component state that makes additional stores
• components can subscribe to specific state changes with selectors
• NgRx Store Implements The Redux Pattern
3. Why Use NgRx?
• Use NgRx To Manage State When
• Your application has a lot of user interactions
• Your application has a lot of different data sources
• Managing state in services is no longer sufficient
• Don't use NgRx when
• your application is simple with little shared state
• if you don't need global shared state, use ngrx component store (solution for local state)
• discussion of The SHARI Principle
• ngrx ensures type safety
4. Getting the Most from This Course
5. Sample Application
6. Course Outline

Module 3: First Look

1. Introduction
2. Demo: Setting up the Sample Application
• sample application uses the in memory angular web api library
3. Demo: Install and Initialize the Store
• shows how to import Storemodule and register reducers 
• to install, npm install @ngrx/store
• shows how to inject Store
4. Demo: Building a Reducer to Process Actions
• createReducer creates a reducer
• reducers a pure function and return a brand new state
• spread operator does only shadow copy
• show to create an action inline
5. Demo: Dispatch an Action to Change State
• shows how to dispatch an action
• shows how to use select to subscribe to specific property of state and how to use it in a template

Module 4: Developer Tools and Debugging

1. Introduction
• Steps to Install the Redux Store Dev Tools
• Install the browser Redux DevTools chrome extension
• Install @ngrx/store-devtools
• Initialize @ngrx/store-devtools module
• the chrome extension will add a Redux tab to the chrome dev tools
• in appmodule, you need to import dev tools module and configure it
• maxage has a default of 50
2. Installing the Tools
3. Demo: Using the Tools

Module 5: Strongly Typing Actions with Action Creators

1. Introduction
• Rules to Writing Good Actions
• create many specific actions
• Write them upfront
• Divide by event source
• Capture events not commands
• Descriptive debug logs
2. Writing Action Creators
• you can use createAction or createActionGroup to create actions
3. Create Action Groups
• show how to create action with createActionGroup
• shows how to import and disptach actions from a component
4. Demo: Action Creators
5. Demo: Loading Products Action Creators

Module 6: Selecting State with Selectors

1. Introduction
• it is not advisable to select properties from store, use selectors instead
• selectors make your code portable and add type safety
• use ceateSelector and createFeatureSelector to create selectors 
• selectors can be composed
2. Demo: Selectors

Module 7: Working with Effects

1. Introduction
2. What Are Effects?
• Effects are an RxJS powered side effect model for NgRx Store.
• an effect takes an action, does some work and dispatches a new action
3. Defining an Effect
• an effect is an angular service
• shows an example of creating an effect
4. Demo: Defining an Effect
• shows how to register an effect in a module
5. Exception Handling in Effects
• use catchError operator to catch and return an error from an effect
• catchError needs to return on observable
• shows how a reducer can listen to a failed action from an effect
6. RxJs Mapping Operators and Effects
• choose correct flatting rxjs operator 
• concatmap is less performant 
• mergemap handles requests in parallel
• switchmap only uses latest request
• exhaustmap is the opposite of switchamp

Module 8: Listen to Router State with Router Store

1. Introduction
• can list for ROUTER REQUEST, ROUTER NAVIGATION,  ROUTER NAVIGATED, ROUTER CANCEL, ROUTER ERROR
• shows how to configure routerstore in a module
2. Demo: Add and Use Router Store
3. Demo: Initialize State in Effect
• shows how to use the ngrxoniniteffects
4. Demo: Navigating in Effect
• show to remove component dependency on service and router
• shows how to use effects to navigate with the router

Module 9: Managing Collections with Entity Adapter

1. Introduction
2. Entity Adapter
• entity adapter makes it easy to work with collections
• use createEntityAdapter to create an entity adapter
• EnityAdapter expects a Id property in your object (it can overridden)
• shows to use entity adapter with reducers and selectors
3. Demo: Add and Use Entity Adapter in Reducers
4. Demo: Entity Selectors

Module 10: Manage Local State with Component Store

1. Introduction
• ComponentStore is a stand-alone library that helps to manage local/component state.
• it can be used without ngrx/store
• it uses a single file and it is local to the component
2. Demo: Component Store
• npm install @ngrx/component-store
• create a service that extends ComponentStore
• use the super method to create the initial state
• add updaters and effects
• create a selector
• provide the service in the component

Module 12: Final Words

1. Introduction
2. Additional NgRx Libraries
• @ngrx/schematics: set of schematics for generating NgRx
• - ng generate store
• - ng generate action
• - ng generate reducer
• - ng generate effect
• - ng generate feature
• - etc ...
• @ngrx/data: Abstracts away the NgRx entity code
• @ngrx/component: Set of helpers to enable more fully reactive applications
3. Stand Alone Components and Signals
4. Closing