Redux Reducer异步API调用、状态管理等常见问题及SPA SEO疑问咨询

Redux相关问题解答 #

问题1：要调用异步API，需要在Reducer中执行哪类操作？ #

• Reducer要求是无副作用的纯函数，不允许在Reducer中执行任何异步API调用，也不允许执行其他副作用逻辑（比如修改外部变量、操作DOM等）。
• 异步API需要放在Redux中间件层处理（常用中间件包括redux-thunk、redux-saga、redux-toolkit内置的异步处理能力等），Reducer仅负责处理异步请求完成后分发的同步Action，同步更新对应状态。

问题2：应当如何拆分store中的数据处理逻辑？我目前认为是通过Reducer实现，是否正确？ #

• 你的理解部分正确：按业务模块拆分Reducer是核心的拆分方式，Redux官方推荐每个业务模块对应一个切片Reducer（Slice Reducer），仅负责维护自身模块的状态更新逻辑，最终通过combineReducers合并成根Reducer。
• 除了Reducer拆分之外，复杂的异步请求逻辑、公共数据转换/过滤逻辑也可以按业务模块抽成独立的函数，和对应模块的Reducer、Action放在同个业务目录下维护，避免所有逻辑耦合在同一个根Reducer中。

问题3：Redux中的state是借助Reducer修改还是借助Action修改？我个人认为是Reducer，烦请指正。 #

• 你的理解正确：
  • Action本身只是描述「发生了什么事件」的普通对象，没有修改状态的能力；
  • Reducer是纯函数，接收当前state和触发的Action作为入参，计算返回全新的state，是唯一负责更新state的角色。

问题4：现有代码的connect绑定逻辑是手动还是自动完成？ #

你提供的代码如下：

const TodoContainer = connect(mapStateToProps, mapDispatchToProps) 
(TodoWidgetDisplayComponent);

export default TodoWidgetDisplayComponent

• 这段代码属于手动调用connect完成绑定的写法，但代码存在错误：你虽然通过connect生成了绑定后的容器组件TodoContainer，但最终导出的是未做任何绑定的原始组件TodoWidgetDisplayComponent，这段代码的connect逻辑实际上不会生效。如果要让绑定生效，需要将导出语句改为export default TodoContainer。
• 目前Redux官方更推荐使用useSelector和useDispatch两个Hook替代connect写法，代码会更简洁。

选择题解答 #

单页应用的渲染逻辑可能会降低其在搜索引擎索引中的排名，该表述是否正确？ #

• 你的答案true正确：
  • 传统单页应用默认采用客户端渲染（CSR），爬虫请求页面时初始拿到的HTML只有空的根节点，没有实际业务内容，早期搜索引擎爬虫不会执行客户端JS，无法抓取到页面真实内容，会直接影响SEO排名。
  • 目前部分主流搜索引擎已经支持爬取客户端渲染的内容，但抓取效果、权重仍然低于服务端渲染（SSR）、静态站点生成（SSG）的页面，所以该表述成立。

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