React+Redux中Reducer状态已更新，容器组件仍获取旧状态

这种情况我碰到过好几次，大概率是Redux的核心规则没落实到位——reducer必须返回新的状态引用，不能直接修改原状态，当然也可能是组件订阅状态的环节出了问题，咱们一步步来排查：

1. 先检查你的cases reducer写法 #

你给出的代码里const newState = ...这部分没写完，但这是重灾区！如果你的写法是直接修改原state再返回，比如：

// ❌ 错误写法：直接修改原数组，引用没变
const newState = state;
newState.push(...action.cases);
return newState;

Redux是通过引用变化来检测状态更新的，你直接修改原数组/对象，state的引用没改变，Redux就会认为状态没更新，容器组件自然拿不到新值。

正确的写法应该是创建新的数组/对象：

// ✅ 正确写法：返回新数组（替换整个列表）
export function cases(state=[], action) { 
  switch (action.type) { 
    case constants.LOAD_CASES_SUCCESS: 
      // 如果是完全替换cases数据，直接返回action里的新数据
      return action.cases;
      // 如果是追加新数据，用扩展运算符生成新数组
      // return [...state, ...action.cases];
    default: 
      return state; 
  } 
}

2. 检查容器组件的状态映射是否正确 #

不管你用类组件的connect还是函数组件的useSelector，都要确保你拿到的是store里的最新状态：

• 类组件用connect时，确认mapStateToProps的路径正确：

const mapStateToProps = (state) => ({
  cases: state.cases, // 这里的key要和根reducer里合并的key一致
  caseTypes: state.caseTypes
});

• 函数组件用useSelector时，别写错误的选择器：

// ✅ 正确：直接从state里取最新的cases
const cases = useSelector(state => state.cases);
// ❌ 错误：如果存了副本在组件里，不会自动更新
const [localCases, setLocalCases] = useState([]);
// 除非在useEffect里监听state变化更新副本，但没必要，直接用useSelector取就好

3. 确认异步action的dispatch时机 #

如果你的LOAD_CASES_SUCCESS是异步请求完成后dispatch的，要确保dispatch是在请求成功后执行的，比如用redux-thunk的话：

export const loadCases = () => async (dispatch) => {
  try {
    const res = await fetch('/api/cases');
    const casesData = await res.json();
    // 必须等请求完成后再dispatch，确保action里带的是最新数据
    dispatch({ type: constants.LOAD_CASES_SUCCESS, cases: casesData });
  } catch (err) {
    console.error('加载cases失败:', err);
  }
};

如果提前dispatch了，那reducer拿到的就是旧数据或者空数据。

4. 检查根reducer的合并是否正确 #

确保你在根reducer里把cases和caseTypes正确合并了，路径错了的话组件也拿不到新状态：

import { combineReducers } from 'redux';
import { caseTypes, cases } from './your-reducer-file';

const rootReducer = combineReducers({
  caseTypes, // 对应state.caseTypes
  cases // 对应state.cases，别写错key！
});

先从这几个点排查，尤其是reducer是否返回新引用，这是最常见的问题。

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