如何访问 rtk 查询中父组件中调用的查询子组件中的数据？

Question

如何在子组件内部访问父组件中调用的查询数据，而无需进行道具钻探。

例如，如果在 parent.js 中我调用 getPost 查询

const {data} = useGetPostQuery();

那么我怎样才能在层次结构中访问这些数据呢？

Answer 1

• 如果您希望所有渲染组件都可以使用数据，请使用 Context。但是，上下文中的频繁更改会导致持久性问题，因为如果组件设计不当，整个树将被重新渲染。
• 另一种选择是在应用程序中使用 Redux 来管理状态。 https://redux.js.org/introduction/core-concepts
• 本地存储是另一种选择，但不建议这样做。

Answer 2

我看到了两个选项：

1. “正确”的答案方式 - 是使用 API 切片中的选择器来访问已在 rtk-q 的 Redux 存储中的缓存数据。假设我们有posts API 切片定义。因此，我们将能够使用 rtk-q 提供的选择器直接访问某些特定的缓存帖子：

.

const selectPost = posts.endpoints.getPost.select(postId);

selectPost - 是一个记忆选择器，由 rtk-q 生成特定的postId。要获取数据 - 您需要传入应用程序状态，它将从缓存中返回预期的帖子，即您的父组件之前获取的内容。 在组件内部，它可以与useSelector 一起使用，例如：

const { data: post } = useSelector(posts.endpoints.getPost.select(postId));

这里有更多细节： https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#selecting-users-data

1. 还有一个非常简单的方法 - 就是在您的孩子中使用相同的查询代码 :)。 即使听起来很奇怪\有异味——它没有任何问题，因为你让你的组件独立\解耦，它无论如何都会得到这个数据——甚至会在父组件之外使用。但是，如果它将用于您描述的情况，作为一个孩子 - 它只会从缓存中获取数据，没有真正的 API 调用，因此不会损害性能。而且看起来比选择器还要清晰。

我更喜欢这种方法，而且我觉得它使代码更加一致 - 我只是在组件中声明“我需要该数据”，并且不在乎它是否之前被提取，保持所有组件与了解任何其他组件分离，使其具有凝聚力。

这里有点感动： https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#cache-data-subscription-lifetimes

Offtopic 奖励：如果您不需要父组件上的 post 数据并且只想获取它以提高响应能力 - 您可以使用 usePrefetch 挂钩。例如 - 在“编辑”按钮悬停时，它将进行 API 调用，将数据放入缓存中，因此post 将立即可供孩子使用。

更多： https://redux-toolkit.js.org/rtk-query/usage/prefetching

Answer 3

通过 props 将数据从 parent 发送到 child 的最简单方法，但如果您想在没有 props 的情况下执行此操作，您应该使用其他策略，例如：localStorage、cockies 或 redux。