Redux更新dashboards后全量useSelector触发重渲染如何解决

你遇到的全量重渲染问题由几个典型的Redux使用错误导致：

1. reducer更新逻辑错误：SET_DASHBOARDS处理时直接覆盖了整个data分支，会丢失data下原有的products等字段；如果你的action直接把接口返回的dashboards数据作为payload，action.payload.data实际取值为undefined，还会导致data字段结构异常。
2. 无意义的引用更新触发重渲染：useSelector默认用===严格比较前后两次返回值，如果你的切片reducer（比如globalFilters对应的reducer）在default case写了return { ...state }，会导致任何action触发时，该切片都会生成新的对象引用，哪怕内容完全没变，也会被判定为状态变化，触发所有依赖该状态的组件重渲染。
3. 如果你在组件中用选择器返回组合后的对象/数组（比如从state中解构多个字段拼成新对象返回），每次selector执行都会生成新的引用，也会导致不必要的重渲染。

1. 修正reducer的状态更新逻辑 #

• 逐层做浅拷贝，只更新需要修改的dashboards字段，不要直接替换整个data分支，同时对齐action payload的取值：

case constants.SET_DASHBOARDS:
  return {
    ...state,
    data: {
      ...state.data, // 保留data下原有的products等其他字段
      dashboards: action.payload // 直接取传入的dashboards数据，不要多写.data
    }
  };

• 所有reducer的default case必须直接返回原state，不要做无意义的浅拷贝，避免生成不必要的新引用：

default:
  return state; // 禁止写return { ...state }

2. 优化useSelector的比较逻辑 #

• 对于直接返回原始类型值、或者直接返回state子属性引用的选择器（比如state => state.globalFilters），只要reducer没有无意义更新引用，就不会触发多余重渲染。
• 对于需要返回组合对象/数组的选择器，传入shallowEqual作为useSelector的第二个参数，做浅比较判断是否真的有属性变化：

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

const { dateRange, userId } = useSelector(
  state => ({
    dateRange: state.globalFilters.dateRange,
    userId: state.globalFilters.userId
  }),
  shallowEqual
);

• 复杂的派生数据计算，使用reselect创建记忆化选择器，只有依赖的状态变化时才重新计算结果，避免重复生成新引用。

3. 修正Saga监听写法（可选，规避隐性问题） #

你当前的takeEvery多了一层无意义的generator包裹，推荐改成标准写法避免重复监听：

function* getDashboardsWorker(params) {
  try {
    const { data } = yield axios.get('/dashboards', { params });
    yield put(actions.setDashboards(data));
  } catch (e) {
    console.log(e);
  }
}

function* getDashboardsWatcher() {
  yield takeEvery(constants.GET_DASHBOARDS, getDashboardsWorker);
}

export default function* rootSaga() {
  yield all([fork(getDashboardsWatcher)]);
}

修复后可以用React DevTools的Profiler面板、或者在useSelector回调里打日志验证，只有关联状态实际变化时，对应组件才会触发重渲染。

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