LogoLogo
Development
Development
  • NGXS
    • Overview
  • INTRODUCTION
    • WHY
    • INSTALLATION
    • STARTER KIT
    • SCHEMATICS
  • CONCEPTS
    • STORE
      • Overview
      • Store Schematics
      • Store Options
      • Error Handling
      • Meta Reducers
    • ACTIONS
      • Overview
      • Action Schematics
      • Actions Life Cycle
      • Action Handlers
      • Cancellation
      • Monitoring Unhandled Actions
    • STATE
      • Overview
      • State Schematics
      • Life-cycle
      • Composition
      • Lazy Loading
      • State Operators
      • Custom State Operators
      • Shared State
      • State Token
      • Immutability Helpers
      • Error Handling
      • Sub States
    • SELECT
      • Overview
      • Mapped Sub States
      • Optimizing Selectors
      • Selector Utils
      • Error Handling
      • Signals
      • Select Decorator
  • STYLE GUIDE
  • PLUGINS
    • Overview
    • CLI
    • Logger
    • Devtools
    • Storage
    • Forms
    • Web Socket
    • Router
    • HMR
  • RECIPES
    • Authentication
    • Caching
    • Component Events from NGXS
    • Debouncing Actions
    • Dynamic Plugins
    • Module Federation
    • Unit Testing
    • RxAngular Integration
    • Zoneless Server-Side Rendering
  • COMMUNITY & LABS
    • COMMUNITY
      • FAQ
      • Resources
      • Developer Guide
      • Contributors
      • Contributing
      • Sponsors
    • NGXS LABS
      • Overview
  • DEPRECATIONS
    • Inject Container State Deprecation
    • Sub States Deprecation
    • Select Decorator Deprecation
  • CHANGELOG
Powered by GitBook
On this page
  1. DEPRECATIONS

Select Decorator Deprecation

The @Select decorator is slated for removal in the future due to its inherent risks. It lacks integration with Angular's dependency injection system, making it prone to failures in scenarios with multiple simultaneous applications, such as server-side rendering and microfrontend setups.

Previously, the decorator stored the Store instance in a static variable, which could be overwritten by subsequent bootstrapped or removed applications. If a second application was created and destroyed before the first one, it could nullify the static variable, rendering the store inaccessible to the first application.

Every @Select usage should be replaced with the following:

class UsersComponent {
  @Select(UsersState.getUsers) users$!: Observable<User[]>;

  // Should become the following
  users$: Observable<User[]> = inject(Store).select(UsersState.getUsers);
}

The store.select method now requires a typed selector to be provided. Therefore, if the @Select decorator previously accepted a string or an anonymous function, it should be replaced with a selector:

class UsersComponent {
  @Select('users') users$!: Observable<User[]>;
  // Or
  @Select(state => state.users) users$!: Observable<User[]>;

  // Should become the following
  users$: Observable<User[]> = inject(Store).select(UsersState.getUsers);
}

We could potentially provide a schematic migration that simply replaces the code. However, since the select decorator was permitted to be used inside classes not created by Angular dependency injection, our code replacement approach could still be flawed.

PreviousSub States Deprecation

Last updated 1 year ago