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

yws3nbqq  于 2023-02-04  发布在  其他
关注(0)|答案(1)|浏览(211)

我使用redux-toolkit-query进行API调用。

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
  },
 ]
}

现在getAllPostsgetPost方法都可以工作了,但是我所做的是从getAllPosts开始迭代所有的帖子并渲染它们。我的目标是在每个帖子上都有一个刷新按钮,按下这个按钮只会刷新那个帖子的数据。这就是我遇到的困难。我不知道什么是最好的方法。
这将是一个很大的帮助,如果你们能指出我在正确的方向。不要求代码只是方法。
感谢您发送编修。

j8yoct9x

j8yoct9x1#

我建议采取以下步骤:
1.通过useGetAllPosts获取getAllPosts的帖子
1.遍历结果项,创建Post组件,不管它看起来像什么,并将post的id传递给它,或者传递给整个post对象,由您决定。
1.在Post组件中调用useGetPost,提供来自父PostsList组件的id props
1.在Post组件中,使用处理程序定义一个“refresh”按钮,该按钮将调用refetch函数,该函数由useGetPost挂钩提供:

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

通过调用refetch,您将从API获得最新的数据,而忽略该高速缓存。
还有其他处理标记的方法,如缓存无效,但我想这一种方法将适用于您的情况。

相关问题