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
    1. Demo: Action Creators
    2. 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
      1. Demo: Add and Use Router Store
      2. Demo: Initialize State in Effect
        • shows how to use the ngrxoniniteffects
      3. 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

      Comments

      Post a Comment

      Popular posts from this blog

      Angular Routing and Navigation Playbook

      Image
      https://www.pluralsight.com/courses/angular-routing-navigation-playbook by Lara Newsom Course Overview Course Overview Course Introduction and Code Examples Course Introduction and Code Examples Basic Angular Routing Setup Introduction to Angular Routing Discussion: Angular RouterModule Exports Demo: Bootstrap Angular RouterModule Discussion: Declaring Routes angular has tow route path match strategies: prefix based or full match prefix is the default Demo: Declaring Default and Home Routes two options for declaring a default route: {path: ' ', componenet: DefaultComponent} {path: ' ', redirectTo: 'home', pathMatch: 'full'} Discussion: Child Routes and Route Order Demo: Declaring a Wildcard Route wild card routes is: path: '**' to enabled logging all navigation events to the console, enable tracing Demo: Hooking into Router Events Routing in Standalone Component Applications Introduction to Standalone Components and Routing Demo: Bootstrapping Ro...
      Read more

      Working with Files in C# 10

      https://www.pluralsight.com/courses/c-sharp-10-working-files by Jason Roberts Course Overview Course Overview Sandbox Managing Files and Directories Introduction Creating a New Console App Checking if a File Exists you can use to check if file path is an absolute path: Path.IsPathFullyQualified Getting the Parent Directory of a Path Checking if a Directory Exists and Creating New Directories Copying a File Moving a File Getting the File Extension from a File Name Checkpoint 01- Get the Parent Directory for a Path Changing a Filename Extension Checkpoint 02 - Get the Extension Part of a Filename Deleting a Directory Enumerating All the Files in a Directory Summary Exercise 01- Copying and Deleting Files Monitoring the File System for Changes Introduction Introducing the FileSystemWatcher Class The IntemalBufferSize Property Configuring Notification Filters Additional Properties Refactoring to Use a FileSystemWatcher use FileSystemWatcher to watch for file changes in a folder Checkpo...
      Read more

      Mastering Git

      https://app.pluralsight.com/library/courses/master-git/table-of-contents by Paolo Perrotta Module 1: Course Overview Course Overview Module 2: The Four Areas: Introduction Version Check About This Training A Note About the Command Line Introducing the Four Areas The Working Area The Repository The Index Module 3: The Four Areas: Basic Workflow Revisiting the Basics Moving Data to the Right Moving Data to the Left Removing Files Renaming Files A Quick Summary Module 4: The Four Areas: Git Reset Understanding Reset A Reset Example More Reset Examples Module 5: The Four Areas: Advanced Tools Stashing Data Solving Conflicts Working with Paths Committing Parts of a File Introducing Switch and Restore Git Is a Toolbox Module 6: History: Exploring the Past Becoming a History Surgeon Referencing Commits to show changes in a commit: git show HEAD to show changes in a commit parent: git show HEAD^ Tracking Changes in History Browsing the Log Module 7: History: Fixing Mistakes Reviewing the Golde...
      Read more