如何更新 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 遍历所有 post 并渲染它们。我的目标是在每次按下 post 时都有一个刷新按钮，这将仅刷新 post 的数据。这就是我遇到困难的地方。我不知道解决这个问题的最佳方法是什么。

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

感谢您的帮助:)

Answer 1

我建议执行以下步骤：

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

就是这样。通过调用 refetch，您将从 API 获得最多的 up-to-date 数据，忽略缓存。

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

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

How to update fetched data in redux toolkit query?

reactjs

react-router

redux

redux-toolkit

rtk-query