NgRx Auto-Entity
Primary version
Primary version
  • NgRx Auto-Entity
  • Getting Started
    • Installation
    • Quick Start
    • Use your State!
      • Enhancing your Facade
      • Simplify your Component
    • From Scratch
      • App Interfaces
      • App Reducer
      • App State Module
      • Entity Model
      • Entity State
      • Update App State
      • Entity Service
      • Update App Module
  • Advanced Topics
    • Advanced Usage
      • Paradigm Changes
        • Models
        • Services
        • Service Providers
      • Taking Control
        • Integrating Custom Effects
      • Building Your Entities
        • Entity Names
        • Sort Comparers
        • Data Transforms
      • Building Your Entity States
        • The buildState() function
        • The buildFeatureState() function
        • The IEntityState Interface
        • The Selector Map
      • Generic Actions
        • Actions Now
        • Reusable Generic Actions
        • Custom Criteria
        • Loading Actions
          • Loading Entities
          • Loading Pages
          • Loading Ranges
        • Optional Loading
        • CURD Actions
        • Utility Actions
      • Correlation
      • Common Selectors
        • Exporting Selectors
      • Extra Selectors
      • Custom Selectors
        • Adding to Facades
        • Using Custom Selectors
      • Custom Effects
        • Composing Actions
        • Workflows
    • Leveraging Facades
      • Preparing Facades
      • The Interface: Selections
        • Using Facade Selections
        • Simplifying Further
      • The Interface: Activities
        • Using Facade Activities
      • So Little Code!
    • Utility Functions
      • Prototyping your Entities
        • Entity Making Performance
      • Entity Name Utilities
      • Entity Key Utilities
      • Entity Comparers
  • Examples
    • Sample Application
      • App Module
      • State
      • Models
      • Services
      • Facades
      • Container Components
      • Presentation Components
      • Modal Component
  • Documentation
    • Reference
  • Extras
    • Github Link
Powered by GitBook
On this page
  • Just "buildState()!"
  • Rich Functionality
Export as PDF
  1. Advanced Topics
  2. Advanced Usage

Building Your Entity States

Initialization Simplified

At the core of NgRx Auto-Entity is the buildState function. This utility function encapsulates the creation and management of all the "boilerplate" that you would normally implement yourself when building up state for a new entity. In the past you may have manually created an @ngrx/entity adapter, built out your standardized reducer function, and exported a bunch of support elements like initial state, selectors, a key selection handler, etc.

Just "buildState()!"

Now you simply need to call buildState() like so:

entity.state.ts
import { IEntityState } from '@briebug/ngrx-auto-entity';
import { Model } from 'models';

const { initialState } = buildState(Model);
export function entityReducer(state = initialState): IEntityState<Model> {
    return state;
}

That is about as simple as it gets, unless you need to do anything custom, such as add your own additional support actions, use selectors, or retrieve the prefabricated facade base class so you can keep your state encapsulated.

Rich Functionality

The buildState function provides all of the functionality necessary to take control when you need to, without being complex, and all while still handling most of the work for you. The full expression of a buildState call would be as follows:

import { IEntityState } from '@briebug/ngrx-auto-entity';
import { Model } from 'models';

export const { 
    initialState, 
    selectors: {
        selectAll: allModels,
        selectEntities: modelEntities,
        selectIds: modelIds,
        selectTotal: countOfModels,
        // Additional selectors...
    }, 
    entityState, 
    facade: ModelBaseFacade,
    reducer: modelReducer // Sadly, this does not work with AOT! :'(
} = buildState(Model);

// Extracted projection for easier unit testing
export const findFirstModel = (state: IEntityState<Model>) => 
    (entityState.ids?.length && entityState.entities) 
      ? entityState.entities[entityState.ids[0]] 
      : null;

// Selectors are simply compositions of other selectors and a projection
export const firstModel = createSelector(
    entityState,
    findFirstModel
);

In addition to providing the initial state version for your stub reducer, the buildState() function also provides a selectors map, an entityState selector to support the creation of custom selectors, a base facade class (source of ultimate power and simplicity!), and finally a ready-made stub reducer (only works with non-AOT builds, sorry!)

PreviousData TransformsNextThe buildState() function

Last updated 4 years ago