react-state-rxjs
  • Introduction
  • Main differences
  • Performance first
  • GETTING STARTED
    • Instalation
    • Examples
  • Core concepts
    • Main idea
      • More complex flow visualization
    • Configuration
    • Store
      • Operators
      • Optimistic updates plugin
      • Form manager plugin
        • ShouldUpdateState hook
        • Custom form elements
      • Persist state plugin
        • Configuring custom storage
    • Actions
      • Immer
      • ImutableJs
      • Async
    • Components with Actions
    • @InjectStore decorator
    • @ComponentState decorator
    • ComponentState Hook
    • Dispatcher
    • Router / History
  • DIFFERENT SCENARIOS
    • Passing list item index via router
  • UNIT TESTING
    • Setup
    • Test store
    • Test actions
    • Test component with actions
    • Test with Enzyme
  • Debugging
    • Setup
    • Redux DevTools
    • Automated changes output
    • Manual state changes check
    • Additional debugging information
  • Production
    • Production mode
  • 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: ''
})
PreviousComponents with ActionsNext@ComponentState decorator

Last updated 6 years ago

Was this helpful?