reactjs 我可以订阅多个组件中过滤的RTK查询数据结果吗？

qyzbxkaa 于 2023-01-25 发布在 React

关注(0)|答案(1)|浏览(122)

我有一系列组件，它们都使用从RTK查询响应中导出的数据。虽然从具有相同查询参数的相同响应中导出，但每个组件都需要数据通过一组相对昂贵的客户端过滤器（其参数是redux存储切片属性），这些属性对于每个组件可能不相同。但是，所有组件都要求数据至少通过两个特定的筛选器。2下图显示了这种关系：
是否可以在数据被特定过滤器/过滤器集转换 * 之后 * 订阅数据？

我考虑过的方法：

在所有组件中使用查询，应用某个useEffect或useMemo中所需的任何筛选器。这并不可取，因为这意味着至少有2个筛选器要重复nComponents次。
使用createSlice extraReducers选项并侦听查询完成，然后执行过滤操作。这工作得很好，因为我可以在reducer中使用过滤参数，但我相信，一旦过滤参数已更新，但查询数据保持不变，我就没有办法用新参数重复操作。
订阅一个组件，在每个相应的过滤器阶段之后将数据发布到切片，为每个组件订阅相应的数据。这是我目前的实现方式，但它并不理想，因为它将组件耦合在一起，这是我希望避免的，膨胀了一个任意选择的组件，并产生频繁的大状态操作，这会减慢我的应用程序。
提高对共享祖先组件的查询订阅，然后将数据作为 prop 传递。这并不理想，因为这些组件相对于其共享祖先处于不同的深度，我想这将导致至少对某些组件进行 prop 钻取。
使用react context与相应的组件共享前2个过滤操作的结果。还没有深入研究过这个;它能和查询订阅一起工作吗？

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

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

理想情况下，当查询参数更改或过滤参数更改时，数据将更新。我认为这与简单的useEffect实现之间的区别在于，在useEffect场景中，数据不是“共享”的，过滤操作发生nSubscribedComponents次。
RTK中是否存在允许我所寻找的行为的内容？

reactjs

来源：https://stackoverflow.com/questions/71084892/can-i-subscribe-to-filtered-rtk-query-data-results-across-multiple-components

1条答案

按热度按时间

a1o7rhls1#

我认为这里正确的答案是在查询钩子中使用selectFromResult选项。
创建以下“重新选择”选择器：

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的结果改变时重新计算，等等。

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 我可以订阅多个组件中过滤的RTK查询数据结果吗？

1条答案

相关问题

热门标签

最新问答