Redux Store已更新但组件未重新渲染问题求助

1. 修复ReactModal.setAppElement的执行时机 #

你的代码里每次组件渲染都会调用ReactModal.setAppElement('#root')，这可能引发不必要的副作用，甚至干扰组件渲染逻辑。建议将其移到组件外部，仅执行一次：

// 放在组件定义外，全局执行一次
ReactModal.setAppElement('#root');

export const ContentModal = () => {
  // 组件内部逻辑
}

或者用useEffect确保只执行一次：

export const ContentModal = () => {
  useEffect(() => {
    ReactModal.setAppElement('#root');
  }, []);

  // 其他逻辑...
}

2. 解决useSelector的引用比较问题 #

Redux的useSelector默认使用引用比较：如果activeVideo是对象/数组，即使内容更新但引用未改变（比如Redux reducer里直接修改原对象而非返回新对象），useSelector不会触发组件重新渲染。

具体修复方式： #

• 确保Reducer返回新引用：在Redux reducer中更新activeVideo时，必须返回新的对象/数组，示例：

  // 错误写法：直接修改原状态
  state.activeVideo = newVideo;
  return state;
  
  // 正确写法：返回新状态对象
  return {
    ...state,
    activeVideo: newVideo // newVideo是新对象/数组
  };
  

• 使用浅比较优化：如果activeVideo是对象，且需要比较内容而非引用，导入shallowEqual并传入useSelector：

  import { useSelector, shallowEqual } from 'react-redux';
  
  // 组件内使用
  const activeVideo = useSelector(state => state.activeVideo, shallowEqual);
  

• 直接选择具体字段：如果仅需要activeVideo的某个属性（比如id），直接选择该字段可避免引用比较问题：

  const activeVideoId = useSelector(state => state.activeVideo?.id);
  
  useEffect(() => {
    if (!activeVideoId) return;
    setIsOpen(true);
  }, [activeVideoId])
  

3. 验证组件挂载状态 #

确保ContentModal组件始终存在于DOM树中，而非被条件渲染（比如{showModal && <ContentModal />}）。如果组件未挂载，即使Redux状态更新，也不会触发其内部的useEffect逻辑。

4. 调试确认数据流向 #

在组件内添加日志，确认activeVideo是否正确更新：

export const ContentModal = () => {
  const activeVideo = useSelector(state => state.activeVideo);
  
  // 打印activeVideo，确认状态更新时组件是否接收到新值
  console.log('Current activeVideo:', activeVideo);

  // 其他逻辑...
}

如果日志显示activeVideo未更新，说明useSelector的选择逻辑存在问题；如果日志显示新值但弹窗未打开，检查useEffect的依赖数组是否包含activeVideo（你的代码里已包含，此步骤可忽略）。

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