Redux本地与全局状态管理：跨容器复用认证模块架构咨询

你之前的方案违背关注点分离的核心原因，是把全局通用的认证能力错放到了业务container层级，才会出现每个业务组件都要重复引入认证模块reducer的问题，正确的实现思路是按状态作用域做分层，把全局基础能力和业务逻辑彻底拆解开：

1. 重构store目录结构，全局切片统一注册 #

不要把认证模块归属到任何一个业务container下，单独把跨全应用的通用状态放到store的核心层，初始化store时一次性全局注册所有核心层的reducer和saga，业务container永远不需要单独引入核心层的reducer。
推荐目录结构：

src/
├── store/
│   ├── index.js          # 完成store初始化、组合全量reducer、挂载saga中间件
│   ├── core/             # 全局通用状态切片，无业务耦合
│   │   └── auth/         # 全量认证逻辑存放目录
│   │       ├── constants.js
│   │       ├── actions.js
│   │       ├── reducer.js
│   │       ├── selectors.js
│   │       └── sagas.js
│   └── features/         # 业务状态切片，和对应业务container一一绑定
│       ├── userProfile/  # 用户资料页专属状态、逻辑
│       ├── orderList/    # 订单列表页专属状态、逻辑
│       └── ...
├── containers/           # 仅存放视图层容器组件，不在此目录定义全局reducer
└── ...

核心层的auth切片全局注册一次后，全应用所有组件天然可以访问对应状态、触发对应action，从根源上解决每个container要重复引入两套reducer的问题。

2. 跨组件调用的标准实现 #

• 状态读取：统一使用auth模块对外导出的selector，配合useSelector在任意组件直接取值，不需要额外引入reducer，比如：

  const currentUser = useSelector(selectCurrentUser)
  const accessToken = useSelector(selectAccessToken)
  

• 操作触发：auth模块对外导出的action可以直接在任意位置通过useDispatch触发，比如主动登出只需要调用dispatch(logoutAction())。token自动刷新、401拦截这类逻辑不需要业务组件感知，直接写在auth的saga里监听全局接口错误事件即可，满足触发条件时自动执行刷新/登出流程。

3. 职责边界说明 #

这套结构完全符合关注点分离原则，边界非常清晰：

• core/auth模块只负责认证全流程逻辑：token存取、自动刷新、登出、登录态校验、用户信息拉取，绝对不耦合任何具体业务逻辑
• 业务container/feature只维护自身页面的业务逻辑，仅在需要读取用户信息、主动触发登录/登出操作时，调用auth模块对外暴露的selector和action即可，不需要重复维护认证相关的reducer、saga代码
• 依赖关系单向：业务模块可以调用core层的通用能力，core层不能依赖任何业务模块代码，避免逻辑耦合

4. 实用优化建议 #

• 可以封装通用useAuth自定义hook，把用户信息读取、常用认证方法的逻辑封装在内部，业务组件使用时直接解构即可，不需要重复写useSelector、useDispatch的样板代码：

  const { user, accessToken, logout, refreshToken } = useAuth()
  

• token需要做持久化处理：store初始化时优先从localStorage/sessionStorage读取已存储的token，避免页面刷新丢失登录态；登出时同步清除本地存储的认证信息。
• 参考架构示意图：
  

内容的提问来源于stack exchange，提问作者Michael Seltenreich