美心基金客户端（Upmarket）

用户端面向的是基金投资者，页面里同时存在三类完全不同的数据：用户登录态与偏好等客户端状态、产品净值与持仓等服务端数据、以及权限配置等全局配置。早期用一份全局 store 承载全部数据，导致三个具体问题：组件卸载后数据仍在、无法判断数据是否过期；多个页面各自维护loading 与错误态，交互不一致；权限只在路由层判断、没有在按钮层收口，不同角色的功能入口可见性混乱。此外首屏同时请求产品、公告与图表，资源加载冗重。

以 React 16 + TypeScript + Redux + React Query 构建基金平台用户端门户，覆盖注册登录、产品浏览、投资组合与文档访问。状态分层：

Redux 管跨页面共享的用户态与全局配置，React Query 管服务端数据（缓存、失效、重试），把「客户端状态」与「服务端状态」彻底分开，避免用一份全局 store 承担所有数据导致刷新与竞态问题。性能：

产品与公告这类长列表走分页 + 懒加载；路由级代码分割，首屏只加载必要chunk；对图片与图表做按需渲染，避免首屏一次性请求过多。安全：

分层鉴权在路由与接口两层同时生效，敏感操作（赎回、份额变更）二次确认；登录态过期自动清理并引导重登，避免带着失效态继续操作。可维护性：

公共组件与请求层统一封装，错误处理与加载态一致化，减少各页面重复样板代码。技术难点与解决方式：

• 用一份全局 store 承载所有数据时，缓存失效与竞态难以排查。→ Redux 只管跨页面共享的用户态与全局配置，服务端数据交给 React Query（缓存、失效、重试），职责彻底分开。
• 净值、收益率、份额的数字展示错了就是客诉甚至合规问题。→ 展示层统一格式化口径并区分「展示值」与「计算值」，避免各处重复四舍五入导致对不上。
• token 失效瞬间若继续允许操作，用户会在无感知情况下提交失败。→ 请求层统一拦截 401，先清理登录态再引导重登；敏感操作（赎回、份额变更）二次确认并做幂等保护，防止重复提交。
• 产品、公告、图表同时请求会拖慢首屏。→ 路由级代码分割 + 图表与图片按需渲染，把首屏请求控制在必要集合内。
• 错误提示不能暴露内部细节，也不能让用户误解为操作成功。→ 错误分级（网络/业务/系统）映射到统一文案，关键操作失败时明确说明未生效并给出重试入口。

用户端稳定运行，产品浏览与投资组合等核心路径体验顺畅；状态分层后数据一致性问题明显减少，缓存与失效策略统一后可维护性提升，后续加页面与接接口都更快；首屏请求集合收敛后加载更稳，敏感操作均有二次确认与幂等保护。