使用react-redux的useSelector时，依赖变化为何useEffect不触发？

问题复现 #

以下是代码示例：

import { useDispatch, useSelector } from 'react-redux';
import { updateMyData } from '../features';

const MyComponent = ({ list }) => {
  const dispatch = useDispatch();
  // 从Redux仓库中选择myData
  const someData = useSelector((state) => state.myData);

  React.useEffect(() => {
    // 从未执行过这行日志
    console.log('useEffect', someData);
  }, [someData]);
  // 每次都能看到更新后的新数据
  console.log('someData', someData);

  const handleClick = () => {
    const newData = list.find((l) => l.name === 'myName');
    // 更新myData，场景为分页，从现有列表中选择newData
    dispatch(updateMyData(newData));
  };

  return <div onClick={handleClick}>Hello world!</div>;
};

场景说明：点击按钮更新Redux仓库数据，someData发生变化，组件重新渲染，但useEffect仅在首次渲染时执行一次，后续不再触发。

可能的原因及解决方案 #

1. Redux状态更新未生成新的对象引用

你通过updateMyData传入的newData是直接从props的list中获取的已有对象。如果reducer只是直接将这个对象赋值给state.myData，没有创建新的引用（比如通过展开对象生成副本），那么someData的引用不会改变。

useEffect的依赖项采用浅比较逻辑，只要引用未变，就会判定依赖没有更新，因此不会触发回调。

解决办法：在reducer中更新状态时，为myData创建新的对象引用：

// 正确的reducer写法示例
const myDataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_MY_DATA':
      // 通过展开对象生成新引用，确保状态更新时引用变化
      return {
        ...state,
        myData: { ...action.payload }
      };
    default:
      return state;
  }
};

2. 浏览器控制台的引用显示误导

浏览器控制台打印对象时，显示的是对象的当前状态而非打印时刻的状态。你看到console.log('someData', someData)显示新数据，可能是因为后续对象内容被修改，但打印时someData的引用并未改变。

验证方法：打印时将对象转为JSON字符串，查看打印时刻的真实值：

console.log('someData', JSON.stringify(someData));

如果此时打印的是旧数据，说明someData的引用确实没变化，回到第一个原因处理即可。

3. props/list的引用未更新导致连锁问题

如果list props本身是同一个引用，你修改了list内部项的内容但未更新list的引用，那么newData会是同一个对象引用。dispatch后Redux状态的myData引用也不会变化，最终导致useEffect不触发。

解决办法：更新list时返回新的数组引用，比如：

// 父组件更新list的示例代码
const updateList = () => {
  setList(prevList => {
    // 创建新数组引用
    const newList = [...prevList];
    // 修改目标项的内容
    const targetItem = newList.find(l => l.name === 'myName');
    if (targetItem) {
      targetItem.page = 2; // 修改分页数据
    }
    return newList;
  });
};

总结 #

核心问题在于useEffect依赖项的浅比较机制——只要someData的引用未发生变化，即使内容被修改，也不会触发回调。重点检查Redux reducer中状态更新的方式，确保每次更新都返回新的对象引用。

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