Как можно приоритизировать dispatch?

Приоритизация Dispatch в Redux/Flux архитектурах

Приоритизация dispatch-действий — это техника управления порядком и вероятностью обработки асинхронных операций в Redux-подобных системах. Это критично для оптимизации производительности и обеспечения корректного поведения сложных приложений.

Основные подходы

1. Middleware с очередью приоритетов

Можно создать кастомное middleware, которое управляет очередью dispatch-действий на основе приоритета:

// Middleware с приоритизацией
const priorityMiddleware = () => {
  let queue = [];
  let processing = false;

  const processQueue = async () => {
    if (processing || queue.length === 0) return;
    
    processing = true;
    // Сортируем по приоритету (выше число = выше приоритет)
    queue.sort((a, b) => b.priority - a.priority);
    
    const { action, dispatch } = queue.shift();
    await new Promise(resolve => {
      dispatch(action);
      setTimeout(resolve, 0);
    });
    
    processing = false;
    processQueue();
  };

  return store => next => action => {
    if (action.priority !== undefined) {
      queue.push({ action, dispatch: next });
      processQueue();
    } else {
      return next(action);
    }
  };
};

2. Использование Redux-Saga с приоритетом

Redux-Saga позволяет более гибко контролировать поток выполнения:

// saga.js
import { takeEvery, put, fork } from 'redux-saga/effects';

const priorities = {
  CRITICAL: 0,
  HIGH: 1,
  NORMAL: 2,
  LOW: 3
};

function* prioritySaga() {
  const sagas = [];
  
  yield takeEvery('*', function* (action) {
    if (!action.priority) return;
    
    const priority = priorities[action.priority] ?? priorities.NORMAL;
    
    if (priority <= 1) {
      // Критичные и высокие приоритеты выполняются немедленно
      yield fork(handleAction, action);
    } else if (priority <= 2) {
      // Обычный приоритет — в микротаск очередь
      yield new Promise(resolve => {
        Promise.resolve().then(() => {
          resolve();
        });
      });
      yield fork(handleAction, action);
    } else {
      // Низкий приоритет — через requestIdleCallback
      yield new Promise(resolve => {
        if (typeof requestIdleCallback !== 'undefined') {
          requestIdleCallback(() => resolve());
        } else {
          setTimeout(resolve, 1000);
        }
      });
      yield fork(handleAction, action);
    }
  });
}

function* handleAction(action) {
  // Обработка действия
  yield put({ type: 'PROCESS_ACTION', payload: action });
}

3. Использование React.startTransition (React 18+)

Современный подход через Concurrent Features:

import { startTransition } from 'react';

// В компоненте
const handleCriticalAction = () => {
  // Критичное действие — без обёртки
  dispatch(criticalAction());
};

const handleLowPriorityUpdate = () => {
  // Низкий приоритет — оборачиваем в startTransition
  startTransition(() => {
    dispatch(lowPriorityAction());
  });
};

const handleNormalUpdate = () => {
  // Обычный приоритет — без обёртки (по умолчанию)
  dispatch(normalAction());
};

Практический пример в Redux Toolkit

import { createSlice, configureStore } from '@reduxjs/toolkit';

const appSlice = createSlice({
  name: 'app',
  initialState: { queue: [] },
  reducers: {
    addToQueue: (state, action) => {
      const item = {
        ...action.payload,
        priority: action.payload.priority ?? 'NORMAL'
      };
      state.queue.push(item);
      // Сортируем очередь по приоритету
      state.queue.sort((a, b) => {
        const priorityOrder = { CRITICAL: 0, HIGH: 1, NORMAL: 2, LOW: 3 };
        return priorityOrder[a.priority] - priorityOrder[b.priority];
      });
    }
  }
});

const store = configureStore({
  reducer: { app: appSlice.reducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat((store) => (next) => (action) => {
      if (action.priority) {
        store.dispatch(appSlice.actions.addToQueue(action));
        return;
      }
      return next(action);
    })
});

Когда использовать приоритизацию?

• CRITICAL: Действия безопасности, критичные ошибки
• HIGH: Обновления UI, пользовательские взаимодействия
• NORMAL: Загрузка данных, обновления состояния
• LOW: Аналитика, лог-записи, фоновые операции

Выбор подхода зависит от архитектуры приложения и требований к производительности.