selectmethod on the
Storeservice or use the
@Selectdecorator. First let's look at the
@Selectdecorator. 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.
Storeclass also has a
selectOncethat will basically do
select().pipe(take(1))for you automatically as a shortcut method.
selectSnapshotfunction 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.
@Selectordecorator 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.
stateis just the local state for this
ZooStateclass. Now in our component, we simply do:
pandas$will only return animals with the name panda in them.
selectorOptionsproperty in the options passed to the
NgxsModule.forRootcall (see Options). These options can also be provided through the
@SelectorOptionsdecorator at a Class or Method level in order to configure the behavior of selectors within that scope. The following options are available:
truewill cause any error within a selector to result in the selector returning
falseresults in these errors propagating through the stack that triggered the evaluation of the selector that caused the error.
falsein NGXS v4.
truewill 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.
falsein NGXS v4.
falsewill 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.
store.selectand evaluate the lazy function using the
createSelectorfunction as opposed to the
@Selectordecorator. 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.
@Selectto call this function with the parameter provided.
Selectordecorator to join other selectors with this state selector.
Selectordecorator 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
injectContainerStateoption being defaulted to
truein NGXS v3.x.
happyLocalPandaselector has the
statedependency even though it is not used. It would recalculate on every change to
stateignoring the fact that
firstLocalPandavalue may not have changed. This is not ideal, therefore this default behavior is changing in NGXS v4.
injectContainerStateselector 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:
happyLocalPandawill only recalculate when the output value of the
zooThemeParksselector anywhere in our application.
entitiesfield on multiple states, we can create a base class containing a dynamic
@Selector()for that field, and extend from it on the
@Stateclasses like this.
EntitiesStateclass on each
strictMetadataEmit(see docs) will most likely be set to true and, as a result, Angular's
@angular/compiler-clipackage 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.`
// @dynamiccomment before the class expression and decorators:
strictPropertyInitializationoption is enabled then the TypeScript compiler will require all class properties to be explicitly initialized in the constructor. Given the following code:
strictPropertyInitializationis turned on:
pandas$property will be initialized (by the