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
        • 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

@InjectStore decorator

@InjectStore decorator is responsible for injecting store and state variables into actions class

First parameter is Path to state

  • if added between single quotes '' it counts as absolute path @InjectStore('todos/items/1')

  • if added in array [], final path will be merged with path passed from parent. e.g: if parent component path is todos and child component path is filter so marking child component with @InjectStore(['filter']) will result path like ['todos', 'filter'] . Do not forget to pass parent path from parent to child by adding to child component markup <todos-filter [statePath]="statePath"></todos-filter>

  • if state is part of the list, stateIndex param should be passed from the parent component and new path will look like: ['items', '${stateIndex}'] -> ['todos', 'items', '0]

  • stateIndex can be an array of indexes so state path can have multiple ${stateIndex}: @InjectSore(['${stateIndex}', 'some_other_path', '${stateIndex}'])

  • there can be use-cases when actions can be shared because of identical states keeping in different locations. In this case there can be anonymous function passed as a first parameter:

@InjectStore((currentPath: string[]) => {
    return currentPath.indexOf('search') >= 0
        ? ['entities', '${stateIndex}']
        : ['${stateIndex}'];
})

Second parameter is initial state

Often in bigger applications you cannot define all state in initial state. Many peaces should be created "on the fly". For this scenario you should pass initial state object as a second parameter:

@InjectStore('todos/sports-todos', {
    name: '',
    description: ''
})
PreviousState ActionsNext@WithStore decorator

Last updated 8 months ago

Was this helpful?