ngrx-workshop
Search…
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
Last modified 2yr ago
Copy link