Redux useSelector始终返回空数组：WebSocket触发状态更新异常排查

核心原因是闭包捕获了旧的状态快照：
WebSocket的回调函数（比如onmessage）是在组件初始挂载时创建的，它会捕获当时useSelector返回的状态值（也就是空数组）。后续Redux状态更新时，组件会重新渲染，但已创建的回调函数不会重新捕获新的状态，所以始终拿到初始的空数组。而useEffect会依赖状态变化重新执行，每次执行时都能获取到最新的状态快照，因此能看到数据已更新。

解决办法 #

1. 使用useRef保存最新状态 #

通过useRef维护一个能实时更新的状态引用，让WebSocket回调可以访问到最新值：

import { useSelector, useRef, useEffect } from 'react';

const YourComponent = () => {
  const workCenterAvailabilityQueue = useSelector(state => state.yourReducer.workCenterAvailabilityQueue);
  const queueRef = useRef(workCenterAvailabilityQueue);

  // 状态更新时同步更新ref
  useEffect(() => {
    queueRef.current = workCenterAvailabilityQueue;
  }, [workCenterAvailabilityQueue]);

  // WebSocket消息处理
  useEffect(() => {
    const ws = new WebSocket('your-websocket-url');
    ws.onmessage = (event) => {
      // 直接访问ref.current获取最新队列数据
      const latestQueue = queueRef.current;
      // 后续更新Redux状态的逻辑
    };

    return () => ws.close();
  }, []);

  return <div>...</div>;
};

2. 直接通过Redux Store获取最新状态 #

如果项目中能直接访问Redux Store实例，可在回调里调用getState()获取实时状态：

import store from './path/to/your-redux-store';

// WebSocket回调内
ws.onmessage = (event) => {
  const latestQueue = store.getState().yourReducer.workCenterAvailabilityQueue;
  // 处理更新逻辑
};

3. 在useEffect内创建回调并依赖状态 #

每次状态更新时重新创建WebSocket回调，确保回调能捕获最新的状态快照，同时注意清理旧监听避免内存泄漏：

import { useSelector, useEffect } from 'react';

const YourComponent = () => {
  const workCenterAvailabilityQueue = useSelector(state => state.yourReducer.workCenterAvailabilityQueue);

  useEffect(() => {
    const ws = new WebSocket('your-websocket-url');
    const handleMessage = (event) => {
      // 这里可直接使用最新的workCenterAvailabilityQueue
      console.log(workCenterAvailabilityQueue);
      // 更新Redux状态的逻辑
    };

    ws.addEventListener('message', handleMessage);
    // 组件卸载或状态更新前移除监听
    return () => {
      ws.removeEventListener('message', handleMessage);
      ws.close();
    };
  }, [workCenterAvailabilityQueue]);

  return <div>...</div>;
};

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