NGXS @Select usage with state model

ngxs selectsnapshot
ngxs example
ngxs selector with parameter
ngxs state decorator
ngxs createselector
ngxs reset state
ngxs dispatch
ngxs angular 8

When using an NGXS @Select decorator what is the right way to access properties defined on the state model.

E.g with the following state defined:

export interface UserStateModel {
 firstname: string;
 lastname: string;
}

@State<UserStateModel>({
  name: 'user',
  defaults: {}
})
export class UserState {..}

In a component if I want to select the user state like this:

..export class MyComponent {

  @Select(UserState) user$: Observable<UserState>;

   ngOnInit(){
     this.user$.subscribe(u => {
         //do something with user state
         console.log(u.firstname);
     });
   }   
}

I get typescript errors as the firstname property doesn't exist on UserState (as it's defined on the related model type). If I'm referencing the property in the component html template then I don't have any issue.

There is a related discussion around selector usage but I just want to confirm what I should expect with the current version (and if I'm doing this correctly!).

I'm using "@ngxs/store": "^3.0.0-rc.2",

The observable decorated by the @Select decorator will be of the model's data type and not the state class. ie:

export class MyComponent {

  @Select(UserState) user$: Observable<UserStateModel>;

   ngOnInit(){
     this.user$.subscribe(u => {
         //do something with user state
         console.log(u.firstname);
     });
   }   
}

Another note is that I recommend the use of the async pipe in your template so that Angular manages the subscription and unsubscription for you.

NGXS @Select usage with state model, The observable decorated by the @Select decorator will be of the model's data type and not the state class. ie: export class MyComponent  In NGXS, there are two methods to select state, we can either call the select method on the Store service or use the @Select decorator. First let's look at the @Select decorator.

Manage State in Angular with NGXS ← Alligator.io, Here's an introduction to State Management in Angular using the NGXS state Start by installing the latest @ngxs/store package from npm. An example might be an action which triggers an API call, and in the response, updating the state. First of all, we can define select properties in our components:. Well, it opens the door for refactoring of your immutable updates into state operators so that your code can become more declarative as opposed to imperative. We will be adding some standard state operators soon that you will be able to use to express your updates to the state.

Usage of arguments in Selectors · Issue #413 · ngxs/store · GitHub, also state[type] could be null if type doesn't exist. But we need See here: https://​ngxs.gitbook.io/ngxs/concepts/select#memoized-selectors @Silthus that is correct it would have to be a model of your whole state but that would work. we can't infer your state model type from the state class. I do like that proposed api but I don't think we can make it any more type safe without the use of a generic. If anyone knows a better way I am more then happy to investigate.

Angular NGXS CRUD Example, NGXS is a state management pattern + library for Angular. Inside src > app, create a new folder called models, inside that folder create a new file called Todo​. states/todo.state'; import {Select, Store} from '@ngxs/store'; import {Todo} from '. In this article, we will learn about the select() operator and when it is better to use reselect when querying a normalized state. Let’s start with a basic example, todos and visibility filter.

Angular With NGXS - State Management, In NGXS, there are two methods to select state - we can either call the Creating an interface model : (product.model.ts) – this describes the  The Goal of NGXS. NGXS tries to make things as simple and accessible as possible. There can be a lot of boilerplate code in state management, thus a main goal of NGXS is to reduce boilerplate allowing you to do more things with less.

NGXS, This is not a NGXS tutorial! I'm not Since the Select is consumed as an Observable it gives a very natural feel inside the Angular ecosystem. It is also In NGXS each entity would require a State and in turn a state model. NGXS is a great tool to manage state in an Angular application. Once you setup your State structures and actions, it is fairly easy to build on. The State is the brain and the components have

Comments
  • I am now wondering if the right way is to declare my selector as @Select(UserState) user$: Observable<UserStateModel>.
  • Thanks @Mark for confirming that from my earlier comment. Re: async pipe, yes have been using that where possible. I'm trying out NGXS on an existing Angular app, so using the pipe in component templates, but I have some services that are subscribers, so I think I need to subscribe manually there (no template).
  • Thanks for that demo link!
  • Invaluable. Thank you.