Как DevTools подключены к Redux?

Как Redux DevTools подключены к Redux

Redux DevTools — это мощный инструмент отладки, который позволяет отслеживать все изменения состояния в приложении. Это очень важно для разработки и отладки Redux-приложений.

Что такое Redux DevTools

Redux DevTools — это браузерное расширение (Chrome, Firefox) и инструмент Node.js, который:

• Отслеживает все dispatched actions
• Показывает состояние после каждого action
• Позволяет перемотать состояние (time-travel debugging)
• Тестировать различные сценарии
• Экспортировать/импортировать состояние

Архитектура подключения

DevTools работает через специальный middleware Redux:

// store.js
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers";

// Подключение Redux DevTools
const composeEnhancers =
  typeof window !== "undefined" &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        trace: true,
        traceLimit: 25
      })
    : compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

Как это работает:

1. Redux DevTools расширение создаёт глобальную переменную window.__REDUX_DEVTOOLS_EXTENSION__
2. Приложение проверяет её наличие
3. Используется специальный enhancer для перехвата actions и состояния
4. Все изменения отправляются в DevTools через постоянное подключение

Современный подход с Redux Toolkit

Redux Toolkit автоматически подключает DevTools:

// store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slices/counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer
  },
  // DevTools подключаются автоматически!
  // Можно настроить опции:
  devTools: {
    trace: true,
    traceLimit: 25,
    actionSanitizer: (action) => ({
      ...action,
      type: action.type.toString()
    }),
    stateSanitizer: (state) => state // Скрывать чувствительные данные
  }
});

export default store;

Как DevTools перехватывает actions

За кулисами происходит следующее:

// Упрощённая схема работы enhancer
function createDevToolsEnhancer(options) {
  return (createStore) => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState);
    
    // Оборачиваем dispatch для перехвата actions
    const originalDispatch = store.dispatch;
    const enhancedDispatch = (action) => {
      // Отправляем информацию в DevTools
      window.__REDUX_DEVTOOLS_EXTENSION__.send(
        action,
        store.getState()
      );
      
      // Выполняем обычный dispatch
      return originalDispatch(action);
    };
    
    // Заменяем dispatch
    store.dispatch = enhancedDispatch;
    
    return store;
  };
}

Подключение middleware для логирования

Дополнительно можно добавить свой middleware для логирования:

// middleware/logger.js
const logger = (store) => (next) => (action) => {
  console.group(action.type);
  console.info("dispatching", action);
  const result = next(action);
  console.log("next state", store.getState());
  console.groupEnd();
  return result;
};

// store.js
import { configureStore } from "@reduxjs/toolkit";
import logger from "./middleware/logger";

const store = configureStore({
  reducer: {
    // ...
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(logger)
});

Time-Travel Debugging

Самая мощная возможность DevTools — перемотка состояния:

// DevTools позволяет:

// 1. Просмотреть состояние после каждого action
// Initial State: { count: 0 }
// Dispatch: { type: "INCREMENT" }
// Next State: { count: 1 }
// Dispatch: { type: "INCREMENT" }
// Next State: { count: 2 }

// 2. Отменить action (вернуться к предыдущему состоянию)
// Нажимаем кнопку "undo" в DevTools
// State: { count: 1 }

// 3. Повторить отменённый action ("redo")
// State: { count: 2 }

// 4. Перейти к любому состоянию в истории
// Выбираем состояние в списке
// State: { count: 0 } (вернулись в начало)

Фильтрация actions в DevTools

Можно скрывать определённые actions от DevTools:

const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer
  },
  devTools: {
    actionSanitizer: (action) => {
      // Скрывать пароли
      if (action.type === "user/setPassword") {
        return {
          ...action,
          payload: "[REDACTED]"
        };
      }
      return action;
    },
    stateSanitizer: (state) => {
      // Скрывать чувствительные данные в состоянии
      return {
        ...state,
        user: {
          ...state.user,
          password: "[REDACTED]",
          token: "[REDACTED]"
        }
      };
    }
  }
});

Экспорт и импорт состояния

DevTools позволяет сохранять состояние и воспроизводить баги:

// В DevTools:
// 1. Нажимаем "Export" чтобы сохранить состояние
// 2. Получаем JSON со всей историей actions
// 3. Можно поделиться с коллегой для отладки

// Вставляем JSON обратно через "Import"
// История actions воспроизводится в точности

Условные breakpoints

Останавливать выполнение при определённых условиях:

const store = configureStore({
  reducer: {
    counter: counterReducer
  },
  devTools: {
    actionSanitizer: (action) => action,
    // Добавляем условие для остановки
    trace: true,
    traceLimit: 25
  }
});

// В консоли можно использовать:
store.subscribe(() => {
  if (store.getState().counter > 100) {
    debugger; // Остановится здесь
  }
});

Производительность

DevTools имеет минимальный overhead:

// В production рекомендуется отключать для экономии памяти:
const store = configureStore({
  reducer: {
    // ...
  },
  devTools: process.env.NODE_ENV !== "production"
});

Сравнение состояний

DevTools показывает дифф между состояниями:

// До action:
{ count: 5, user: { name: "John" } }

// После INCREMENT:
{ count: 6, user: { name: "John" } }

// DevTools показывает:
// Изменено: count (5 -> 6)
// Не изменено: user

Заключение

Redux DevTools работает через:

• Enhancer — перехватывает actions и состояние
• Middleware — может логировать дополнительно
• Расширение браузера — показывает UI для отладки
• Time-travel — переходит между состояниями
• Санитизация — скрывает чувствительные данные

Это один из самых мощных инструментов для отладки Redux-приложений.