CODEWITHSUNDEEP
reduxngxs
Gags
Gags

Reputation: 3829

Do not subscribe to actions ngxs

I have an state selector and action as below

@Selector()
public static employees(state: EmployeeSearchStateModel) {
    return state.employees;
}

@Action(FetchEmployees)
getEmployees({ getState, setState }: StateContext<EmployeeSearchStateModel>) {
    const state = getState();
    this.employeeService.getEmployees().pipe(tap((res: EmployeeSearch) => {
        setState({
            ...state,
            loading: false,
            employees: res.userData
        });
    }));
}

Now, in a component, i want to use it with async pipe, but it does not work. Component declarations are as below:

@Select(ManageEmployeeSearchState.employees) employees$: Observable<EmployeeI[]>;

ngOnInit(){
    this.store.dispatch(new FetchEmployees());
}

In HTML when i try to print <pre>{{ employees$ | async | json }}</pre>, it does not work.. i can not see backend API called.

However, if i replace pipe and tap in Action with subscribe, everything works very well. But i do not want to subscribe?

Any leads please?

Upvotes: 0

Views: 985

Answers (1)

Garth Mason
Garth Mason

Reputation: 8001

If you are using pipe operators in the state rather than calling subscribe, you need to return that Observable to NGXS so that the framework will subscribe to it for you:

@Action(FetchEmployees)
getEmployees({ getState, setState }: StateContext<EmployeeSearchStateModel>) {
    const state = getState();
    return this.employeeService.getEmployees().pipe(tap((res: EmployeeSearch) => {
        setState({
            ...state,
            loading: false,
            employees: res.userData
        });
    }));
}

Upvotes: 3

Related Questions