React-Redux中无关Redux Store更新致组件重复渲染问题排查

你碰到的这个Header组件在body切片更新时莫名重渲染的问题，结合你使用的React、Redux版本，可能的原因和排查方向如下：

• react-redux 8.0.2 的已知兼容性bug
  react-redux 8.x初期版本（包括8.0.2）在适配React 18并发模式时，存在订阅逻辑的漏洞，可能导致无关组件被错误触发重渲染。建议直接升级到react-redux 8.1.0及以上版本，后续版本已经修复了这类订阅相关的问题。

• Reducer 写法错误导致状态引用异常
  哪怕你是更新body切片，如果处理该action的reducer没写对——比如直接修改原state的属性后返回，而不是用展开运算符创建全新的state对象——可能会让Redux内部的状态比较逻辑出问题。哪怕header切片的值看起来没变，也可能因为state整体或切片的引用变化，触发useSelector的更新。检查对应的reducer代码，确保更新body时是这种正确写法：

  function rootReducer(state, action) {
    switch(action.type) {
      case 'UPDATE_BODY':
        // 正确：返回新state对象，保留原header的引用
        return {...state, body: action.payload};
      default:
        return state;
    }
  }
  

• useSelector 的默认比较逻辑被篡改
  虽然你没显式传第二个比较函数参数，但如果项目里有全局配置或者自定义hook封装，不小心修改了useSelector的默认行为，可能会让默认的严格相等（===）判断失效。可以试试手动传入比较函数验证：

  const headerSlice = useSelector(state => state.header, (prev, next) => prev === next);
  

  如果这么改后重渲染停了，说明默认的比较逻辑被改动过。

• Webpack 打包配置的潜在影响
  有些Webpack的压缩或优化插件（比如Terser）如果配置不当，可能会混淆react-redux内部的状态比较代码，导致严格相等判断失效。可以临时关掉代码压缩，看看问题会不会消失，逐步排查打包配置的影响。

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