介绍
今天，我将分享如何使用现代 react 模式构建一个精美的食品数据库管理系统。我们将专注于创建一个具有无缝乐观更新的响应式数据表，将 tanstack query（以前称为 react query）的强大功能与 mantine 的组件库相结合。
项目概况
要求
在数据表中显示食品添加新项目并立即反馈优雅地处理加载和错误状态提供流畅的乐观更新
技术堆栈
tanstack 查询：服务器状态管理mantine ui：组件库和表单管理mantine react table：高级表功能wretch：干净的 api 调用typescript：类型安全
实施指南
1. 设立基金会
首先，让我们定义我们的类型和 api 配置：
// typesexport type getallfoods = { id: number; name: string; category: string;};export type createnewfoodtype = pick;// api configurationexport const api = wretch('').options({ credentials: 'include', mode: 'cors', headers: { 'content-type': 'application/json', accept: 'application/json', },});// tanstack query export const getfoodoptions = () => { return queryoptions({ querykey: ['all-foods'], queryfn: async () => { try { return await api.get('/foods') .unauthorized(() => { console.log('unauthorized'); }) .json<array>(); } catch (e) { console.log({ e }); throw e; } }, });};export const usegetallfoods = () => { return usequery({ ...getfoodoptions(), });};
2. 构建数据表
使用 mantine react table 的表格组件：
const foodsview = () => { const { data } = usegetallfoods(); const columns = usememo<mrt_columndef[]>( () => [ { accessorkey: 'id', header: 'id', }, { accessorkey: 'name', header: 'name', }, { accessorkey: 'category', header: 'category', }, // ... other columns ], [] ); const table = usemantinereacttable({ columns, data: data ?? [], // optimistic update animation mantinetablebodycellprops: ({ row }) => ({ style: row.original.id < 0 ? { animation: 'shimmer-and-pulse 2s infinite', background: `linear-gradient( 110deg, transparent 33%, rgba(83, 109, 254, 0.2) 50%, transparent 67% )`, backgroundsize: '200% 100%', position: 'relative', } : undefined, }), }); return ;};
3. 创建表单
用于添加新食物的表单组件：
const createnewfood = () => { const { mutate } = usecreatenewfood(); const forminputs = [ { name: 'name', type: 'text' }, { name: 'category', type: 'text' }, ]; const form = useform({ initialvalues: { name: '', category: '', // ... other fields }, }); return ( mutate(data))}> {forminputs.map((input) => ( ))} );};
4. 实施乐观更新
我们实现的核心 – tanstack 查询突变与乐观更新：
export const usecreatenewfood = () => { const queryclient = usequeryclient(); return usemutation({ mutationkey: ['create-new-food'], mutationfn: async (data: createnewfoodtype) => { await new promise(resolve => settimeout(resolve, 3000)); // demo delay return api.url('/foods').post(data).json(); }, onmutate: async (newfood) => { // cancel in-flight queries await queryclient.cancelqueries({ querykey: ['all-foods'] }); // snapshot current state const previousfoods = queryclient.getquerydata(['all-foods']); // create optimistic entry const optimisticfood: getallfoods = { id: -math.random(), ...newfood, verified: false, createdby: 0, createdat: new date().toisostring(), updatedat: new date().toisostring(), }; // update cache optimistically queryclient.setquerydata(['all-foods'], (old) => old ? [...old, optimisticfood] : [optimisticfood] ); return { previousfoods }; }, onerror: (err, _, context) => { // rollback on error if (context?.previousfoods) { queryclient.setquerydata(['all-foods'], context.previousfoods); } }, onsettled: () => { // refetch to ensure consistency queryclient.invalidatequeries({ querykey: ['all-foods'] }); }, });};
5. 动画风格
动画将我们乐观的更新带入生活：
@keyframes shimmer-and-pulse { 0% { background-position: 200% 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(83, 109, 254, 0.2); } 50% { background-position: -200% 0; transform: scale(1.02); box-shadow: 0 0 0 10px rgba(83, 109, 254, 0); } 100% { background-position: 200% 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(83, 109, 254, 0); }}
最佳实践
乐观更新立即更新 ui，以获得更好的用户体验通过回滚处理错误情况通过适当的失效保持数据一致性类型安全使用 typescript 以获得更好的可维护性为数据结构定义清晰的接口尽可能利用类型推断性能更新期间取消正在进行的查询使用正确的查询失效实施高效的表单状态管理用户体验提供即时反馈显示加载状态优雅地处理错误
未来的增强功能
在您的实施中考虑这些改进：
撤消/重做功能表单验证规则错误边界实现
结果
1.1.8PbootCMS
PbootCMS是一款高效、简洁、强悍的开源PHP企业网站开发建设管理系统。PbootCMS 1.1.8 更新日志：2018-08-071.修复提交表单多选字段接收数据问题；2.修复登录过程中二次登陆在页面不刷新时验证失败问题；3.新增搜索结果fuzzy参数来控制是否模糊匹配；4.新增父分类，顶级分类名称及链接独立标签，具体见手册；5.新增内容多图拖动排序功能。
243 查看详情
完成请求后
结论
此实现演示了如何使用现代 react 模式创建强大的数据管理系统。 tanstack query、mantine ui 和深思熟虑的乐观更新的结合创造了流畅和专业的用户体验。
记住：
让你的组件保持专注且可维护处理所有可能的状态（加载、错误、成功）使用 typescript 提高代码质量在实施中考虑用户体验
您在 react 应用程序中实施乐观更新时面临哪些挑战？在下面的评论中分享您的经验。
以上就是构建乐观更新的数据表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/895237.html
微信扫一扫 
支付宝扫一扫 
