concatLatestFrom与多个选择器ngrx

Question

我试图获得2个选择器与最新的concatLatestFrom，这是在NgRx 12中引入的，但我似乎无法理解我做错了什么，我无法实现这一点。

我有一个看起来像这样的效果

loadAllCases$ = createEffect(() => this._actions$.pipe(
concatLatestFrom(() => [
this.store.pipe(select(CaseSelectors.getAllCases)),
this.store.pipe(select(CaseSelectors.getCasesLoaded))
]),
navigation(this.caseLandingPage, {
run: (snap, [loaded, cases]) => {
if (loaded) {
return CaseActions.loadAllSuccess();
} else {
return this._caseService.getAll().pipe(
map(cases => CaseActions.loadAllSuccess(cases))
);
}
},
onError: (action, error) => {
return CaseActions.loadAllFailed(error);
}
})
));

然而，由于类型不兼容，这似乎不起作用

Argument of type 'OperatorFunction<Action, [Action, boolean, Case[]]>' is not assignable to 
parameter of type 'OperatorFunction<Action, ActionOrActionWithState<unknown, Action>>'. 
Type '[Action, boolean, Case[]]' is not assignable to type 'ActionOrActionWithState<unknown,
Action>'.
Type '[Action, boolean, Case[]]' is not assignable to type '[Action, unknown]'.       
Source has 3 element(s) but target allows only 2

然而。如果我只留下一个选择器，这工作得很好，这是使用concatLatestFrom只能选择一个选择器的情况吗?请注意，我已经尝试将它们一个接一个地链接起来，这会产生相同的错误。任何帮助或建议，感谢。

更新这似乎是Nx特定的错误，它提供的导航管道，我已经打开了一个与Nx存储库相关的错误问题https://github.com/nrwl/nx/issues/6830

如果使用任何RxJs操作，则示例中的代码可以正常工作。

Answer 1

concatLatestFrom函数和它的重载版本有一个类型声明

import { Observable, ObservedValueOf, OperatorFunction } from 'rxjs';
export declare function concatLatestFrom<T extends Observable<unknown>[], V>(observablesFactory: (value: V) => [...T]): OperatorFunction<V, [V, ...{
[i in keyof T]: ObservedValueOf<T[i]>;
}]>;
export declare function concatLatestFrom<T extends Observable<unknown>, V>(observableFactory: (value: V) => T): OperatorFunction<V, [V, ObservedValueOf<T>]>;

https://github.com/ngrx/platform/blob/12.4.0/modules/effects/src/concat_latest_from.ts

所以你是对的，这个函数要么接受一个可观察对象，要么接受一个可观察对象数组。

但是你似乎用错了操作符的顺序

我不确定导航和caseLandingPage但是这个例子可能会让你了解如何修复/改进你的效果处理程序

public readonly something$ = createEffect(
() =>
this.actions$.pipe(
ofType(someAction),
concatLatestFrom(() => [
this.store.select(selectFoo),
this.store.select(selectBar),
]),
switchMap(([action, foo, bar]) => {
// Do what you need
}),
),
);

Answer 2

嗯，类型接受选择器数组，并且还有一个测试来验证它是否有效。

你有可运行的复制品吗?问题可能出在别的地方。

错误本身提到了concatLatestFrom返回的正确类型，所以我猜测navigate操作符需要调整。

Type '[Action, boolean, Case[]]' is not assignable ...

Answer 3

我认为你不需要管道函数，像这样:

concatLatestFrom(() => [
this.store.select(CaseSelectors.getAllCases),
this.store.select(CaseSelectors.getCasesLoaded)
]),