@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: ''
})

Last updated