不要订阅动作 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 中，当我尝试打印 <pre>{{ employees$ | async | json }}</pre> 时，它不起作用。我看不到后端 API 被调用。

但是，如果我将 pipe and tap in Action 替换为 subscribe，则一切正常。但是我不想订阅？

有线索吗？

Answer 1

如果您在状态中使用 pipe 运算符而不是调用订阅，则需要 return 将 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
        });
    }));
}

不要订阅动作 ngxs

Do not subscribe to actions ngxs

redux

ngxs