优化用户体验的小点：乐观更新链路 双数据库查询

乐观更新链路

不等后端返回，乐观假设update成功，立刻更新ui，失败回滚

针对create delete update操作

// 1. save current state (for rollback)
const prevCharts = [...charts]// 2. update charts immediately
setChart(charts,filter(chart => chart.id !== chartId))
showSuccess('Chart deleted')//3. then try api to avoid blockage 
try{await deleteChart(chartId)
} catch(error){setChart(prevCharts)showError('Failed to delete chart')
}

//recent dashboard click
navigate('/dashboard/${dashboardId}', {state:{cacheData:dashboard}
})// dashboard 页面显示之前的本地缓存 component receive cache data
const {state} = useLocation()
if(state?.cacheData){setDashboard(state.cacheData)
}// 后台验证最新的数据展示到前端
fetchLatestDashboard(dashboardId).then(latest => {setDashboard(latest)
})

双数据库架构

1. 一个数据库用于查询数据给用户观察
   • 数据仓库
   • 只读
   • 大数据
   • 链接pool
2. 另一个数据用于记录用户操作情况
   • 高频读写 curd
   • 异步连接 （async避免阻塞）
   • 存储用户信息和行为记录
   • 事务支持

//todo 无Redux状态管理 SSE防抖更新 SQL自动修正