Redux子组件dispatch改状态未触发父组件useEffect问题求助

• Reducer进行了可变修改，没有返回全新的状态对象，导致state.a的引用没有变化，useSelector默认按引用对比检测不到更新
• 派发的Action没有被Reducer匹配处理，Redux状态压根没有发生修改
• state.a是引用类型（对象、数组等），即使内容更新，useSelector默认的严格相等(===)对比不会认为值发生了变化
• useEffect依赖数组拼写错误，或者父组件未被正确包裹在Redux Provider的作用范围内

1. 先验证Redux状态是否真的更新
   可以在Reducer对应Action的处理逻辑中加日志，或者使用Redux DevTools查看state.a的值在子组件dispatch后是否真的发生了变化，确认Action被正确触发、Reducer正确处理了请求。

2. 检查Reducer的写法是否符合不可变原则
   如果是手写原生Redux，绝对不能直接修改原state对象，必须返回全新的状态对象：

// 错误写法：直接修改原state，引用不变
function rootReducer(state = initialState, action) {
  if (action.type === 'UPDATE_A') {
    state.a = action.payload
    return state
  }
  return state
}

// 正确写法：返回全新的状态对象，引用变化
function rootReducer(state = initialState, action) {
  if (action.type === 'UPDATE_A') {
    return {
      ...state,
      a: action.payload
    }
  }
  return state
}

如果state.a是嵌套对象/数组，需要对应做深层的不可变更新，也可以直接用Immer库简化不可变写法，如果你用的是Redux Toolkit则不需要担心这个问题，内置的Immer会处理可变语法的转换。

3. 调整useSelector的对比逻辑
   如果state.a是引用类型，且你确认Reducer已经返回了全新的对象/数组，可以给useSelector增加第二个浅比较参数，避免不必要的更新，也能确保内容变化时能被检测到：

import { shallowEqual, useSelector } from 'react-redux'

// 浅对比state.a的属性值，而不是只对比引用
let some = useSelector((state)=> state.a, shallowEqual)

4. 验证父组件的变量和依赖是否正确
   在父组件直接打印some的值，确认dispatch前后some是否发生了变化。如果some已经变化但useEffect没有触发，检查useEffect的依赖数组是否正确书写了some，有没有拼写错误、漏写依赖的问题。

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