> Как построить приложение на React и Redux для обработки данных из веб-сокетов и отображения на UI (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Стек: React

> Пример ответа

Для построения приложения на React и Redux с веб-сокетами и отображением данных на UI, следуйте этой архитектуре:

Настройка Redux store с middleware для обработки сокетов (например, redux-saga или redux-thunk). Создайте slice для данных из сокета:

JAVASCRIPT
import { createSlice } from '@reduxjs/toolkit';
const socketSlice = createSlice({
  name: 'socketData',
  initialState: { data: [], status: 'disconnected' },
  reducers: {
    setData: (state, action) => { state.data.push(action.payload); },
    setStatus: (state, action) => { state.status = action.payload; }
  }
});

Создайте сервис для WebSocket в отдельном файле:

JAVASCRIPT
class WebSocketService {
  constructor(dispatch) {
    this.ws = null;
    this.dispatch = dispatch;
  }
  connect(url) {
    this.ws = new WebSocket(url);
    this.ws.onopen = () => dispatch(setStatus('connected'));
    this.ws.onmessage = (event) => dispatch(setData(JSON.parse(event.data)));
    this.ws.onclose = () => dispatch(setStatus('disconnected'));
  }
}

Инициализируйте сокет в корневом компоненте через useEffect:

JAVASCRIPT
function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    const socketService = new WebSocketService(dispatch);
    socketService.connect('wss://example.com/data');
    return () => socketService.ws?.close();
  }, [dispatch]);
  return <DataDisplay />;
}

Компонент отображения использует useSelector для получения данных:

JAVASCRIPT
function DataDisplay() {
  const data = useSelector(state => state.socketData.data);
  const status = useSelector(state => state.socketData.status);
  return (
    <div>
      <p>Статус: {status}</p>
      <ul>{data.map((item, i) => <li key={i}>{item.value}</li>)}</ul>
    </div>
  );
}

Оптимизация: используйте useMemo для фильтрации данных, добавьте обработку ошибок и реконнект при разрыве соединения. Для больших потоков данных применяйте виртуализацию (react-window) и debounce обновлений.