reactjs - 如何更新 redux 工具包查询中获取的数据？

Question

我正在使用 redux-toolkit-query 进行 API 调用。使用我创建的 createAPI 方法如下

export const postApi = createApi({
  reducerPath: 'posts',

  baseQuery: query({
    baseUrl: 'https://localhost:3000/posts/',
  }),

  endpoints: build => ({
    getAllPosts: build.query({
      query:() => ({ url: `/all`, method: METHOD_GET })
    }),
    getPost: build.query({
      query: id => ({ url: `/${id}`, method: METHOD_GET })
    }),
  }),
});

示例 API 响应:

{
 "user_name": "json",
 "user_id": 2313,
 "posts": [
  {
    "title": "Post a",
    "post_id": 1
  },
  {
    "title": "Post b",
    "post_id": 2
  },
 ]
}

现在 getAllPosts 和 getPost 方法都可以工作，但我所做的是从 getAllPosts 迭代所有帖子并渲染它们。我的目标是在每个帖子上都有一个刷新按钮，该按钮只会刷新该帖子的数据。这就是我遇到困难的地方。我不知道解决这个问题的最佳方法是什么。

如果你们能为我指出正确的方向，这将是一个很大的帮助。不要求代码，只要求方法。

谢谢你的帮助:)

Answer 1

我建议采取以下步骤:

1. 通过 useGetAllPosts 使用 getAllPosts 获取帖子

2. 迭代结果项，创建 Post 组件(无论其外观如何)，并将帖子的 id 传递到其中。或者整个帖子对象，由您决定。

3. 在 Post 组件中调用 useGetPost，提供来自父 PostsList 组件的 id、props

4. 在 Post 组件中定义一个带有处理程序的“刷新”按钮，该按钮将调用由 useGetPost Hook 提供的 refetch 函数:

   const {data, refetch} = useGetPost(postId);
   

就是这样。通过调用refetch，您将从 API 获取最新数据，忽略缓存。

还有其他关于标签、缓存失效的方法，但我想这个方法适合您的情况。