第 4 部分：rtk 查询中的高级主题。
本部分将重点介绍 rtk 查询中的高级功能和用例，包括自定义查询、处理身份验证、乐观更新和性能优化。
第 4 部分：rtk 查询中的高级主题
1. 高级rtk查询概念介绍
在上一部分中，我们介绍了使用 rtk 查询来获取和变异数据的基础知识。现在，我们将深入研究更高级的功能，使 rtk 查询变得更加强大。这些功能允许您自定义查询、管理身份验证、优化性能并处理乐观更新，以获得更流畅的用户体验。
2. 自定义basequery进行身份验证
使用需要身份验证的 api 时，您需要自定义 basequery 以包含 jwt 令牌或 api 密钥等身份验证标头。
第 1 步：创建自定义基本查询
您可以创建一个自定义的 basequery 函数，为每个请求添加授权标头。
// src/app/custombasequery.jsimport { fetchbasequery } from '@reduxjs/toolkit/query/react';const custombasequery = fetchbasequery({ baseurl: 'https://jsonplaceholder.typicode.com/', prepareheaders: (headers, { getstate }) => { const token = getstate().auth.token; // assuming auth slice has token if (token) { headers.set('authorization', `bearer ${token}`); } return headers; },});export default custombasequery;
说明：
prepareheaders：此函数允许您为每个请求自定义标头。它从 redux 存储中检索令牌并将其附加到 authorization 标头。
第2步：在createapi中使用自定义basequery
修改 postsapi.js 文件以使用自定义基本查询：
// src/features/posts/postsapi.jsimport { createapi } from '@reduxjs/toolkit/query/react';import custombasequery from '../../app/custombasequery';export const postsapi = createapi({ reducerpath: 'postsapi', basequery: custombasequery, // use the custom base query here tagtypes: ['post'], endpoints: (builder) => ({ fetchposts: builder.query({ query: () => 'posts', providestags: (result) => result ? result.map(({ id }) => ({ type: 'post', id })) : ['post'], }), addpost: builder.mutation({ query: (newpost) => ({ url: 'posts', method: 'post', body: newpost, }), invalidatestags: ['post'], }), }),});export const { usefetchpostsquery, useaddpostmutation } = postsapi;
3. 使用 rtk 查询进行乐观更新
乐观更新允许您在服务器确认突变之前立即更新 ui，提供更流畅的用户体验。如果服务器返回错误，ui 可以恢复到之前的状态。
第 1 步：在突变中实施乐观更新
您可以使用 rtk query 提供的 onquerystarted 生命周期方法来实现乐观更新。
// src/features/posts/postsapi.jsaddpost: builder.mutation({ query: (newpost) => ({ url: 'posts', method: 'post', body: newpost, }), invalidatestags: ['post'], onquerystarted: async (newpost, { dispatch, queryfulfilled }) => { // optimistic update: immediately add the new post to the cache const patchresult = dispatch( postsapi.util.updatequerydata('fetchposts', undefined, (draftposts) => { draftposts.push({ id: date.now(), ...newpost }); // fake id for optimistic update }) ); try { await queryfulfilled; // await server response } catch { patchresult.undo(); // revert if the mutation fails } },}),
说明：
onquerystarted：当突变开始时会触发此生命周期方法。它提供了dispatch和queryfulfilled参数来管理缓存更新。postsapi.util.updatequerydata：这个实用函数允许您乐观地更新缓存数据。patchresult.undo()：如果服务器返回错误，则恢复乐观更新。
4. 处理相关查询
有时，您可能需要执行相关查询，其中一个查询依赖于另一个查询的结果。 rtk 查询提供了skip 参数来控制查询何时执行。
示例：根据所选帖子 id 获取帖子详细信息
// src/features/posts/postdetails.jsimport react from 'react';import { usefetchpostquery } from './postsapi';const postdetails = ({ postid }) => { const { data: post, error, isloading } = usefetchpostquery(postid, { skip: !postid }); if (!postid) return select a post to view details.
; if (isloading) return loading...
; if (error) return error loading post details.
深山旅游网站管理系统 旅游网站管理系统是由深山工作室自主研发而成,具有以下相应的功能.1. 旅游新闻发布,站内新闻发布2. 发布旅游线路详细信息.包括:线路名称、线路类型、线路报价、游完整条线路所需时间、线路说明、线路途经景点、行程安排及其它备注。3. 旅游景点介绍推广4. 旅行社加盟介绍系统.包括:各个旅行社可以发布自己的旅游线路.管理留言,发布信息（vip,会员）5. 酒店宾馆加盟介绍系统，酒店宾馆发布客房信息（v
0 查看详情 
; return ( {post.title}
{post.body}
);};export default postdetails;
说明：
usefetchpostquery：以 postid 作为参数的查询挂钩。如果未提供 postid，则使用 {skip: !postid } 跳过查询。
5. 使用 rtk 查询轮询和实时数据
rtk 查询支持轮询，以指定的时间间隔保持数据最新。这对于实时数据同步很有用。
第 1 步：在查询中使用轮询
您可以使用 pollinginterval 选项为任何查询启用轮询。
// src/features/posts/postslist.jsimport react from 'react';import { usefetchpostsquery } from './postsapi';const postslist = () => { const { data: posts, error, isloading } = usefetchpostsquery(undefined, { pollinginterval: 30000, // poll every 30 seconds }); if (isloading) return loading...
; if (error) return an error occurred: {error.message}
; return ( posts
{posts.map((post) => ( - {post.title}
))}
);};export default postslist;
说明：
pollinginterval：此选项指定查询应轮询服务器以获取新数据的时间间隔（以毫秒为单位）。
6. 使用 selectfromresult 优化性能
rtk 查询提供 selectfromresult 选项以实现高级性能优化，允许您从查询结果中选择特定数据。
第 1 步：使用 selectfromresult 优化重新渲染
当只需要查询结果的子集时，可以使用 selectfromresult 选项来防止不必要的重新渲染。
// src/features/posts/PostTitleList.jsimport React from 'react';import { useFetchPostsQuery } from './postsApi';const PostTitleList = () => { const { data: posts } = useFetchPostsQuery(undefined, { selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }), }); return ( Post Titles
{posts?.map((title, index) => ( - {title}
))}
);};export default PostTitleList;
说明：
selectfromresult：此选项允许您仅从获取的帖子中选择标题，防止查询结果中的其他数据发生更改时不必要的重新渲染。
7. 结论和后续步骤
在这一部分中，我们探讨了 rtk 查询中的高级主题，例如自定义用于身份验证的 basequery、处理乐观更新、管理依赖查询、使用轮询进行实时数据同步以及使用 selectfromresult 优化性能。 rtk query 丰富的功能集使其成为现代 redux 应用程序中处理数据获取和缓存的强大工具。
在下一部分中，我们将讨论redux toolkit 和 rtk 查询的测试策略，涵盖单元测试、集成测试以及确保代码健壮和可维护的最佳实践。
敬请关注第 5 部分：redux 工具包和 rtk 查询的测试策略！
以上就是完整的 redux 工具包（第 4 部分）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491305.html
微信扫一扫 
支付宝扫一扫 
