Redux Toolkit中子组件触发Dispatch成功但父组件状态未更新

核心问题 #

Redux DevTools显示状态已更新，但React组件未触发重渲染，导致子组件接收到的isHeld props始终为false。根本原因是**useSelector默认使用浅比较，当Redux状态中数组的引用未发生变化时，即使数组内元素的属性更新，组件也不会重新渲染**。

原因分析 #

你的holdDieReducer大概率是直接修改了数组中现有Die对象的isHeld属性，但未生成新的数组（即state.dice的引用未改变）。尽管Redux Toolkit的Immer允许直接修改状态，但仅修改数组内元素的属性不会改变数组本身的引用。此时useSelector返回的数组引用与之前一致，浅比较判定状态未变化，父组件Dice不会重渲染，子组件自然无法获取更新后的isHeld值。

解决方案 #

方案1：遵循不可变更新原则，生成新数组（推荐）

修改holdDieReducer，通过map生成新数组，同时复制被修改的Die对象及其props属性，确保state.dice的引用发生变化：

export const holdDieReducer = (state, action) => {
  state.dice = state.dice.map(die => 
    die.id === action.payload 
      ? {
          ...die,
          props: {...die.props, isHeld: !die.props.isHeld}
        } 
      : die
  )
}

这种方式符合Redux的不可变更新规范，能让useSelector准确检测到状态变化，触发组件重渲染。

方案2：修改useSelector的比较逻辑

如果暂时不想修改reducer，可以在父组件的useSelector中传入自定义比较函数，强制检测数组内部元素的变化：

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

export function Dice() {
  const dice: DieModel[] = useSelector<RootState, DieModel[]>(
    (state) => state.dice.dice,
    shallowEqual
  )
  // ... 其余代码
}

shallowEqual会比较数组中每个元素的引用，若需要检测元素内部属性的变化，也可以使用lodash.isEqual这类深比较工具，但深比较会带来一定性能开销，仅在特殊场景下使用。

验证 #

修改完成后，点击Die组件，Redux状态更新的同时父组件会触发重渲染，子组件将接收到更新后的isHeld值，样式也会随之变化。

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