ANGULAR NGXS: How to use selectSnapshot with lazy selector

user_1845475 0
Viewed 537

I am learning NGXS, I have a lazy selector as below

@Selector()
static getStudent(state: StudentModel) {
    return (std_id: string) => {
        return state.students[std_id];
    } 
}

in component, I tried to get a snapshot of that selector

let _student = this.store.selectSnapshot(StudentState.getStudent);
console.log('_student : ', JSON.stringify(_student ));

But the result is undefined

Any Suggestion is appreciated

ngxs angular typescript state-management
1 Answers

you are not returning a value but a function declaration

this.store.selectSnapshot(StudentState.getStudent);

you may want to define an ngxs dynamic selector which takes arguments, like std_id, and process the desired value in selector body definition and by using dynamic selectors do not define selector decorator. Then;

this.store.selectSnapshot(StudentState.getStudent(std_id));

snapshots are static, you should use @Select decorator and subscribe to it on your component;

@Select(StudentState.getStudent(std_id))
getStudent$: Observable<SomeMOdel>;

ngOnit() {
   this.getStudent$.subscribe(console.log);
}

// or

<div *ngIf="getStudent$ | async as student">{{ student }}</div>
user_21531870
Related