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. Core concepts
  2. Actions

Injectable Actions

Starting from version 9.1.0 @ng-state/store supports injectable actions with possibilit to inject an Angular service into constructor. This pushes even further separation of concerns by moving not only state manipulation logic inside actions but also data retrieval, logging and other related functionality.

@Injectable({ providedIn: 'root' })
@InjectStore('users')
export class TodosStateActions extends HasSignalStore<TodoModel[]> {
    constructor(private userService: DataService) {
        super();
    }

    getUsers() {
        this.userService.getData().subscribe(() => {
            this.store.update(state => {
                state.users.push(...state);
            });
        });
       
    }
}

Due to Angular injection Injectabel actions cannot be used with decorators and state actions

PreviousImmutaleJsNextComponents with Actions

Last updated 8 months ago

Was this helpful?