javascript - 我可以跨多个组件订阅过滤后的 RTK 查询数据结果吗？

Question

我有一系列组件，它们都使用来自 RTK 查询响应的数据。虽然来自具有相同查询参数的相同响应，但每个组件都需要数据通过一组相对昂贵的客户端过滤器(其参数是 redux 存储切片属性)，每个组件可能不相同。但是，所有组件都需要数据通过至少两个特定的过滤器。这种关系如下图所示:

在特定过滤器/过滤器集转换后的数据是否可以订阅？

我考虑过的方法:

• 在所有组件中使用查询，在某些 useEffect 或 useMemo 中应用任何需要的过滤器。这是不可取的，因为这意味着至少有 2 个过滤器被复制 nComponents 次。
• 使用 createSlice extraReducers 选项并监听查询完成，然后执行过滤操作。这工作正常，因为我可以在 reducer 中使用过滤器参数，但我相信一旦过滤器参数已更新但查询数据保持不变，我就无法使用新参数重复操作。
• 订阅一个组件，在每个相应的过滤阶段后将数据​​发布到切片，为每个组件订阅相应的数据。这就是我目前实现它的方式，但它并不理想，因为它将我希望避免的组件耦合在一起，使一个任意选择的组件膨胀，并产生频繁的大状态 Action ，这会减慢我的应用程序。
• 提高对共享祖先组件的查询订阅，然后将数据作为 Prop 传递。这并不理想，因为这些组件相对于它们的共同祖先处于不同的深度，我想这会导致至少对某些组件进行支柱钻探。
• 使用 React 上下文与相应组件共享前 2 个过滤器操作的结果。还没有研究这么多；它可以与查询订阅一起使用吗？

凭直觉，我认为一些作为 API 结果和组件的订阅数据之间的中间件运行的回调是理想的。我知道 API 切片中可定义的 transformResponse 选项，但我认为它不适合或不可能用于这种情况。

const queryResult = endpointName.useQuery(args, filterArgs, (data, filterArgs) => {
    return data.performSomeSharedFilterOperationHere(filterArgs);
    } 
);

理想情况下，数据会在查询参数更改或过滤器参数更改时更新。我想这与简单的 useEffect 实现之间的区别在于，在 useEffect 场景中，数据不是“共享”的，并且过滤器操作发生 nSubscribedComponents 次。

RTK 中是否有任何允许我正在寻找的行为的内容？

Answer 1

我认为这里的正确答案是使用 the selectFromResult option in the query hooks .

创建以下重新选择选择器:

const selectFilter1 = createSelector(
  // Start by taking the actual response data as its input
  (inputData) => inputData,
  (data) => // magically transform here
)

const selectFilter2 = createSelector(
  selectFilter1,
  (filteredData) => // magically transform here
)

// repeat for filters 2 and 3

然后，在组件中:

  const { filteredData} = useGetPostsQuery(undefined, {
    selectFromResult: result => ({
      // We can optionally include the other metadata fields from the result here
      ...result,
      // Include a field called `filteredData` in the result object, 
      // and memoize the calculation
      filteredData: selectFilter3(result.data)
    })
  })

组件将共享相同的选择器实例，因此每次调用选择器时都应传入相同的 result.data 引用，因此计算应该内存。前几个选择器应该记住它们的结果，因此 selectFilter3 只需要在 selectFilter2 的结果发生变化等情况下重新计算。