redux 中状态更新失败通常源于 reducer 内直接修改了 state 对象，违反了不可变性原则；正确做法是返回新对象，确保 react 能检测到变化并触发组件重渲染。
在使用 Redux + Redux-Saga 构建 React 应用时，一个高频陷阱是：Saga 成功获取数据并 dispatch 了 FETCH_PRODUCTS_SUCCESS action，但 App 组件却未响应状态更新——看似“数据没回来”，实则问题出在 reducer 的实现逻辑上。
核心问题在于 reducer 中直接赋值修改了 state：
// ❌ 错误写法：直接修改原 state，破坏不可变性 case FETCH_PRODUCTS_SUCCESS: state.products = action.products; // 修改了原始引用！ break;
Redux 依赖浅比较（shallow equality）来判断 state 是否变化。若 reducer 返回的是原 state 引用（或未显式返回任何值，JavaScript 默认返回 undefined），Redux 就认为状态未更新，从而跳过组件重渲染——这正是 App 无法获取最新数据的根本原因。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
✅ 正确写法必须遵循 不可变更新（Immutable Update） 原则：始终返回一个全新对象，而非修改旧对象：
import { FETCH_PRODUCTS_SUCCESS } from '../types/action';
const initialState = {
products: [],
};
export const productsReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_PRODUCTS_SUCCESS:
// ✅ 正确：返回新对象，保留原有 state 结构，仅更新 products 字段
return { ...state, products: action.products };
default:
// ✅ 必须返回当前 state（不能省略！）
return state;
}
};⚠️ 关键注意事项：
- return state 在 default 分支中不可或缺；遗漏会导致默认返回 undefined，引发整个 Redux store 崩溃；
- 不可使用 push()、splice()、Object.assign(state, ...) 等会改变原对象的方法；
- 复杂嵌套结构推荐使用 Immer 简化不可变更新逻辑（如 produce(state => { state.products = action.products })）；
- 确保 App 组件通过 useSelector 正确订阅了 products 状态，且 selector 返回值是新引用（避免返回引用相同对象导致跳过渲染）。
修复后，Saga dispatch 的成功 action 将被 reducer 正确处理，生成新 state，触发 App 组件重新渲染，最终显示最新产品列表。记住：Redux 的灵魂是不可变性，Saga 只是异步搬运工，真正决定状态能否落地的，永远是你的 reducer。
