Не подписывайтесь на действия ngxs

Question

У меня есть селектор состояния и действие, как показано ниже

@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
        });
    }));
}

Теперь в компоненте я хочу использовать его с асинхронным каналом, но он не работает. Объявления компонентов указаны ниже:

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

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

В HTML, когда я пытаюсь напечатать {{ employees$ | async | json }}, это не работает .. Я не вижу, как вызывается внутренний API.

Однако, если я заменю pipe and tap в действии на subscribe, все будет работать очень хорошо. Но я не хочу подписываться?

Есть ли какие-либо сведения, пожалуйста?

Answer 1

Если вы используете pipe операторы в состоянии, а не вызов подписки, вам нужно вернуть это Observable в NGXS, чтобы платформа подписалась на него для вас:

@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
        });
    }));
}