ng-state
  • Introduction
  • Main differences
  • Getting Started
    • Instalation
    • Examples
  • Core concepts
    • Main idea
      • More complex flow visualization
    • Configuration
      • Immer Setup
      • ImmutableJs Setup
    • Store
      • Operators
      • Optimistic updates plugin
      • Optimistic updates plugin
      • Form manager plugin
        • onChange hook
        • onPropertyChange
        • shouldUpdateState hook
        • Custom form elements
      • Persist state plugin
        • Configuring custom storage
    • Actions
      • Immer
      • ImmutaleJs
      • Injectable Actions
    • Components with Actions
      • Signal Actions
      • State Actions
    • @InjectStore decorator
    • @WithStore decorator
    • @ComponentState decorator
    • Dispatcher
  • Different scenarios
    • Passing list item index via router
    • ngOnChanges hook
    • FormManager pitfalls
  • Unit testing
    • Setup
    • Test store
    • Test actions
    • Test component with actions
    • Test with Angular TestBed
  • Debugging
    • Setup
    • Redux DevTools
    • Automated changes output
    • Manual state changes check
    • Additional debugging information
  • Production
    • Production mode
    • Server Side Rendering (SSR)
  • Other information
    • Best practices
    • CLI
      • Custom Configurations
    • Performance
    • Blog Posts
    • Contributing
Powered by GitBook
On this page

Was this helpful?

  1. Other information

Best practices

and recommendations

Here you will find some recommendations in order to not miss use this library

  • Actions should be used ONLY for manipulating state. They should not cntain business logic or call other services

  • Try to avoid absolute paths in @InjectStore decorator because

    • it might lead to wrong architecture of your project

    • paths might become long

    • paths can start to overlap

  • Direct store usage, when injecting into service or components via constructor, should not be common, rather exceptional case. e.g: you might have some shared data like userData stored in the root of you state and you want to access it from everywhere. But for this case I recommend to have some authService and with method getUserData rather than keep repeating same code (DRY principle)

getUserData() {
    let userData;
    
    this.store
        .select<UserData>(['userData'])
        .pipe(take(1))
        .select(state => userData = state);
        
    return userData;
}
  • User Smart and dumb components

  • User @InjectStore decorator ONLY on smart components

  • Entire application with smart components should reflect structure of state as close as possible.

PreviousServer Side Rendering (SSR)NextCLI

Last updated 5 years ago

Was this helpful?

State Structure