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

乐观更新链路

不等后端返回，乐观假设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自动修正