Next.js中使用Redux状态的Websocket数据导致组件无限重渲染

你的问题核心是每次WebSocket推送数据时，Redux状态里的socket.data都生成了新的引用，而useSelector默认用浅比较，只要引用变了就会触发组件重渲染，最终导致无限循环。下面是具体的解决办法：

1. 使用记忆化选择器（推荐） #

用Redux Toolkit的createSelector创建记忆化的选择器，它会缓存计算结果，只有当依赖的状态真正变化时才返回新值，避免不必要的重渲染。

import { createSelector } from '@reduxjs/toolkit';

// 定义记忆化选择器
const selectSocketData = createSelector(
  (state: RootState) => state.socket.data,
  (data) => data // 可按需提取需要的字段，进一步缩小重渲染触发范围
);

// 组件中使用
const socketData = useSelector(selectSocketData);

2. 自定义useSelector的比较逻辑 #

如果不想用记忆化选择器，可以给useSelector传第二个参数，指定深比较逻辑（注意深比较有性能开销，仅在必要时使用）：

import isEqual from 'lodash/isEqual';
// 或者用react-redux自带的shallowEqual（浅比较，适合对象结构简单的情况）
// import { shallowEqual } from 'react-redux';

const socketData = useSelector((state: RootState) => state.socket.data, isEqual);

3. 优化Reducer的状态更新逻辑 #

从源头控制状态更新，只有当数据真正变化时才生成新的状态引用：

import isEqual from 'lodash/isEqual';

// 示例Reducer中的处理逻辑
case 'socket/updateData': {
  // 先对比新旧数据，无变化则直接返回原状态
  if (isEqual(state.socket.data, action.payload)) {
    return state;
  }
  // 数据有变化时才更新状态
  return {
    ...state,
    socket: {
      ...state.socket,
      data: action.payload
    }
  };
}

4. 仅提取组件需要的字段 #

如果组件只用到socket.data中的某一部分，不要直接取整个对象/数组，而是在选择器里只提取需要的字段，这样只有该字段变化时才触发重渲染：

// 比如只取最新价格
const latestPrice = useSelector((state: RootState) => state.socket.data?.latestPrice);

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