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

  • 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