Introducing NgRx
Auto-Entity

Simplifying Reactive State

Prerequisites

• Angular 6+
• RxJs - Reactive Extensions for JavaScript
• NgRx - Angular ReactiveX State

Relevant Resources

• Introduction to NgRx Auto-Entity @ Medium
• I'm Not Ready for NgRx @ RMA
• @ngrx/entity: The Forgotten Package @ RMA
• Intro to RxJs @ RMA

Shoutout!

We LOVE NgRx!

The Problem

• High volume of prerequisite code
• A moderate amount of complexity
• A high degree of decoupling
• High dispersion of code in codebase
• Colloquially: "Boilerplate"

Other Solutions

• Angular CLI Schematics
  • Generate from command line
• IDE Snippets
  • Generate within IDE
• angular-ngx-data (@ngrx/data)
  • Config-driven
  • Encapsulated & Automated

The Auto-Entity Solution

• Same problem/Different style than @ngrx/data
  • Less configuration
  • More functional, dynamic, familiar
• Stick to the standards & remain familiar!
• Aims to augment, not replace, NgRx
• Offer simplifications & improvements to NgRx

Vanilla

• Action Enums
• Action Classes
• Action Unions
• Effect Classes
• Reducer Functions
• Entity Adapters
• Selectors
• State Interface
• Reducer Map
• Facade Class *
• Models
• Services

Auto-Entity

• State Interface
• Reducer Map
• Facade Class *
• Models
• Services

Auto-Entity Architecture

• Add-on Library
• Generic Actions
  • Less boilerplate!
• Reusable Effects
  • Even less boilerplate!
• Reusable Meta-Reducer
  • No more boilerplate!
• Simplify!
• Integrate!

NGRX-AE Architecture

Familiarity

Simplicity
Flexibility

Pleasant

Efficient
Fun

In the Library

• State preparation utilities
  • Initial State
  • Selectors
  • Reducer
• Generic reusable actions
  • Loads
  • Create/Update/Replace
  • Delete
• Ready-made Effects
• Ready-made Meta-Reducer
• Key utilities
• Entity Facades!

Developer Responsibility

• Some things are foundational
• NgRx State Interface/Reducer Map
• Entity Models
• Entity Services

Standard NgRx Stuff

• Must be developer responsibility
• Application/Feature State Interface
  • May use IEntityState<TModel>
• Application/Feature Reducer Map

Entity Models

• Always developer responsibility
• Must be class instead of interface
  • ​Class is "first class" in ECMAScript
  • Interface is "compile-time only" in TypeScript
• May use @Key decorator for identity
  • May decorate many for composite keys

Entity Services

• Also always developer responsibility
  • (For now! ;))
• Must conform to simple interface
• Access to rich entity information
• Access to custom criteria to support any backend
• Must be provided in ngModule in specific manner
• May be shared among many entities!

Entity Facades

• Present greatly simplified API to state!
• Easy to extend with additional behavior
  • Simple typescript extends
  • Low-level methods and props in base
• Generated by NGRX-AE for you

Extra Goodies

• Not just a set of CRUD actions
• Load in many common ways
  • Single/Many/All
  • Pages or Ranges
• We cover common NgRx patterns
• Additional state/selectors
  • Loading/Saving/Deleting Flags
  • Loaded/Saved/Deleted At Timestamps

Future Goals

• Evolving Library, Evolving Concept
• Add support more common use cases
  • Toasts & Snackbars for CRUD
  • Pre-fab Entity Services
  • Configurable Effect Behaviors

Thanks for Watching!