NGRX 选择器 : factory selector within another selector without prop in createSelector method

Question

使用工厂选择器模式 const selectA = (id: number) => createSelector(...) 我有一个实例，我想在另一个选择器中重用这个选择器(遍历一个ID 数组)，但我不知道在调用 createSelector 时传递给因子选择器的值。

所以我有一个选择器，每当我想获取组件 A 的一部分状态时，我都会使用它。

const selectA = (id: number) =>
    createSelector(
        selector1.selectEntityMap,
        selector2.selectEntityMap,
        selector3ById(id), 
        (
        thing1, 
        thing2, 
        thing3
        ) => {
            return ...
       });

现在我想为数组中的每一项获取组件 A 的列表。

const selectListOfA = (ids: number[]) =>
    createSelector(
    selectA, 
    (selectorA) => {
        return ids.map((id) => selectorA(id));
    });

问题是selectA，它现在是一个工厂选择器，需要一个参数，但是我在调​​用createSelector时不知道它。

我可以通过在工厂上创建另一个工厂来编译代码const selectAFactory = () => selectA;

然后在createSelector

中引用新工厂

const selectListOfA = (ids: number[]) =>
    createSelector(
    selectAFactory, <<< here 
    (selectorA) => {
        return ids.map((id) => selectorA(id));
    });

当然，现在发生的是选择器返回一个 MemoizedSelector[] 列表。

这个模式看起来不应该这么复杂，人们不是以这种方式重用他们的选择器吗，我错过了什么？

Answer 1

selectA 返回的函数是一个标准函数，即它没有什么神奇之处，正如这篇博文中解释的那样:https://dev.to/zackderose/ngrx-fun-with-createselectorfactory-hng

这意味着 selectListOfA 可以简单地为每个 id 调用从 selectA 返回的函数，并且将返回组件 A 的状态切片数组:

export const selectListOfA = (ids: number[]) =>
  createSelector(
    (state) => state,
    (state) => ids.map((id) => selectA(id)(state))
  );

这按预期工作，但由于每次商店中发生任何更改时都会执行投影仪功能(为每个 id 重新创建选择器)，此解决方案将存在重大性能问题。

我们也可以将代码简化为性能同样差的代码:

const selectListOfA = (ids: number[]) =>
  (state) => ids.map(
    (id: number) => selectA(id)(state)
  );

如果我们改为提供一个选择器数组作为 createSelector 调用的输入，那么 Ngrx 将能够正确确定何时必须重新评估 selectA 选择器:

const selectListOfA = (ids: number[]) =>
  createSelector(
    ids.map((id) => selectA(id)), // This results in an array of selectors
    (...resultArr) => resultArr
  );

但是，Typescript 会报错，因为 createSelector 方法没有为可变长度数组声明的匹配重载，因此我们还需要放宽数组的输入类型(any)作为指定 selectListOfA 的返回类型。

问题的答案是:

  const selectListOfA = (ids: number[]) =>
  (createSelector(
    ids.map((id) => selectA(id)) as any,
    (...resultArr) => resultArr
  ) as (state) => string[]);