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

【问题标题】：How to update fetched data in redux toolkit query?如何更新 redux 工具包查询中获取的数据？
【发布时间】：2022-01-03 12:08:55
【问题描述】：

我正在使用 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 迭代所有帖子并呈现它们。我的目标是在每个帖子按下时都有一个刷新按钮，它将仅刷新该帖子的数据。这就是我遇到困难的地方。我不知道解决这个问题的最佳方法是什么。

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

感谢您的帮助:)

【问题讨论】：

标签： reactjs redux react-router redux-toolkit rtk-query

【解决方案1】：

我建议以下步骤：

通过useGetAllPosts获取getAllPosts的帖子
遍历结果项，创建Post 组件，无论它应该是什么样子，并将帖子的id 传递给它。或整个帖子对象，由您决定。
在Post 组件中调用useGetPost，提供来自父 PostsList 组件的 id、props
在 Post 组件中定义一个带有处理程序的“刷新”按钮，它将调用 refetch 函数，由 useGetPost 钩子提供：
```
const {data, refetch} = useGetPost(postId);
```

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

标签还有其他方法，缓存失效，但我想这对你的情况有用。

【讨论】：