concatLatestFrom 带有多个选择器 ngrx

Har*_*rry 8 ngrx ngrx-effects angular ngrx-store nrwl-nx

我正在尝试使用 NgRx 12 中引入的最新 concatLatestFrom 获取 2 个选择器,但是我似乎无法理解我做错了什么,并且我无法实现这一点。

\n

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

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

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

\n
Argument of type \'OperatorFunction<Action, [Action, boolean, Case[]]>\' is not assignable to \nparameter of type \'OperatorFunction<Action, ActionOrActionWithState<unknown, Action>>\'. \nType \'[Action, boolean, Case[]]\' is not assignable to type \'ActionOrActionWithState<unknown,\nAction>\'.\nType \'[Action, boolean, Case[]]\' is not assignable to type \'[Action, unknown]\'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\nSource has 3 element(s) but target allows only 2\n
Run Code Online (Sandbox Code Playgroud)\n

然而。如果我只留下一个选择器,效果很好,这是使用 concatLatestFrom 只能选择一个选择器的情况吗?\n注意,我尝试将它们一个接一个地链接起来,这会产生相同的错误。任何帮助或建议表示赞赏。

\n

更新

\n

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

\n

如果示例中的代码通过任何 RxJs 操作进行管道传输,则可以正常工作。

\n

小智 13

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>]>;

Run Code Online (Sandbox Code Playgroud)

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

所以你是对的,这个函数接受单个可观察值或可观察值数组。

但您似乎以错误的方式使用运算符的顺序

我不确定navigationcaseLandingPage是什么意思,但这个示例可能会让您了解如何修复/改进效果处理程序

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

        }),
      ),
  );
Run Code Online (Sandbox Code Playgroud)


tim*_*ver 1

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

你有可运行的复制品吗?问题可能是别的。

错误本身提到了返回的正确类型concatLatestFrom,所以我的猜测是该navigate运算符需要调整。

Type '[Action, boolean, Case[]]' is not assignable ...
Run Code Online (Sandbox Code Playgroud)