select
method on the Store
service or use the @Select
decorator. First let's look at the @Select
decorator.@Select
decorator. It has a few different ways to get your data out, whether passing the state class, a function, a different state class or a memoized selector.Store
class also has a select
function:selectOnce
that will basically do select().pipe(take(1))
for you automatically as a shortcut method.selectSnapshot
function that allows you to pull out the raw value. This is helpful for cases where you need to get a static value but can't use Observables. A good use case for this would be an interceptor that needs to get the token from the auth state.@Selector
decorator that will help us with that. This decorator will memoize the function for performance as well as automatically slice the state portion you are dealing with.state
is just the local state for this ZooState
class. Now in our component, we simply do:pandas$
will only return animals with the name panda in them.selectorOptions
property in the options passed to the NgxsModule.forRoot
call (see Options).
These options can also be provided through the @SelectorOptions
decorator at a Class or Method level in order to configure the behavior of selectors within that scope. The following options are available:suppressErrors
true
will cause any error within a selector to result in the selector returning undefined
.false
results in these errors propagating through the stack that triggered the evaluation of the selector that caused the error.false
in NGXS v4. true
._injectContainerState
true
will cause all selectors defined within a state class to receive the container class' state model as their first parameter. As a result every selector would be re-evaluated after any change to that state. false
in NGXS v4.false
will prevent the injection of the container state model as the first parameter of a selector method (defined within a state class) that joins to other selectors for its parameters.true
.store.select
and evaluate the lazy function using the rxjs
map
pipeline function.createSelector
function as opposed to the @Selector
decorator. It does not need to be created in any special area at any specific time. The typical use case though would be to create a selector that looks like a normal selector but takes an argument to provide to the dynamic selector.@Select
to call this function with the parameter provided.Selector
decorator to join other selectors with this state selector.Selector
decorator with arguments within a state class, it will inject the state class's state model as the first parameter followed by the other selectors in the order they were passed in the signature. This is the behavior provided by the injectContainerState
option being defaulted to true
in NGXS v3.x.happyLocalPanda
selector has the state
dependency even though it is not used. It would recalculate on every change to state
ignoring the fact that firstLocalPanda
value may not have changed. This is not ideal, therefore this default behavior is changing in NGXS v4.injectContainerState
selector option will change to false
, resulting in selectors that are more optimised because they do not get the state model injected as the first parameter unless explicitly requested. With this setting the selectors would need to be defined as follows:happyLocalPanda
will only recalculate when the output value of the firstLocalPanda
selector changes.zooThemeParks
selector anywhere in our application.entities
field on multiple states, we can create a base class containing a dynamic @Selector()
for that field, and extend from it on the @State
classes like this.EntitiesState
class on each @State
like this:strictMetadataEmit
(see docs) will most likely be set to true and, as a result, Angular's MetadataCollector
from the @angular/compiler-cli
package will report the following issue with using lambdas in static methods:Metadata collected contains an error that will be reported at runtime: Lambda not supported.`
// @dynamic
comment before the class expression and decorators:strictPropertyInitialization
strictPropertyInitialization
option is enabled then the TypeScript compiler will require all class properties to be explicitly initialized in the constructor. Given the following code:strictPropertyInitialization
is turned on:pandas$
property declaration (note the added exclamation mark):pandas$
property will be initialized (by the @Select
decorator).