redux 中状态更新失败通常源于直接修改 state 导致的不可变性破坏；正确做法是始终返回新对象，而非修改原 state。本文详解如何在 redux-saga 场景下修复 reducer 的不可变更新逻辑，并确保 app 组件能响应式获取最新状态。
在使用 Redux + redux-saga 构建异步数据流时，一个常见却隐蔽的问题是：Saga 成功 dispatch 了 FETCH_PRODUCTS_SUCCESS action，但 App 组件并未重新渲染，或 useSelector 无法读取到更新后的 products 数据。根本原因往往不在 saga 逻辑本身，而在于 reducer 违反了 Redux 的不可变性原则。
回顾原始代码中的 productsReducer：
// ❌ 错误：直接修改 state，且未返回值 case FETCH_PRODUCTS_SUCCESS: state.products = action.products; // 直接赋值 → mutation! break; // 缺少 return → 默认返回 undefined！
这段代码存在两个严重问题：
- 直接修改 state 对象属性（state.products = ...），违反 Redux 要求的“不可变更新”；
- 未显式返回 state，导致该 case 分支默认返回 undefined，整个 Redux store 状态被清空（等价于 return undefined），触发 React-Redux 的 shallow equality 比较失败，组件跳过重渲染。
✅ 正确写法必须满足两点：不修改原 state、始终返回新 state。推荐使用对象展开语法实现不可变更新：
// ✅ 正确：返回全新 state 对象，保持不可变性
case FETCH_PRODUCTS_SUCCESS:
return { ...state, products: action.products };
default:
return state; // 必须有兜底返回，避免 undefined此外，请确认以下关键点以确保端到端生效：
- ✅ Saga 已正确 dispatch action：检查 put({ type: FETCH_PRODUCTS_SUCCESS, products }) 是否执行且 payload 结构匹配；
- ✅ Root reducer 已正确组合：确保 productsReducer 已通过 combineReducers 注入 store；
- ✅ App 组件使用 useSelector 订阅正确字段：例如 const { products } = useSelector(state => state.products)；
- ✅ Provider 包裹正确：
必须包裹 ，且 store 由 configureStore（Redux Toolkit）或 createStore 初始化。
? 提示：使用 Redux Toolkit（@reduxjs/toolkit）可彻底规避此类错误——其 createSlice 内置 Immer 支持，允许“看似修改实则安全”的写法，同时强制类型安全与默认不可变保障。
修复后，Saga 触发的 FETCH_PRODUCTS_SUCCESS 将生成合法的新 state，React-Redux 能准确检测到引用变化，App 组件随之响应式更新，完整闭环异步数据流。记住：Redux 的灵魂是不可变性；违背它，再完美的 Saga 也徒劳无功。
