Разрыв круга путаницы: путешествие по круговой зависимости

Недавно я наткнулся на ошибку в своей кодовой базе Redux, из-за которой мне пришлось почесать голову. Если вы когда-нибудь ощущали внезапную волну замешательства, когда набор тестов выдает бессмысленную ошибку, вам знакомо это чувство. Вот что произошло и как я в итоге обнаружил (и устранил) проблему.

Что такое круговая зависимость?

Циркулярная зависимость возникает, когда два или более модулей зависят друг от друга — прямо или косвенно — создавая бесконечный цикл в цепочке зависимостей. Другими словами, это похоже на то, как два друга говорят: «Ты иди первым», но никто не двигается с места. В JavaScript это может привести к неопределенным модулям или неполным данным, что приводит к ошибкам, которые невероятно сложно отследить.

Виновник: пример

Представьте себе два файла JavaScript: ModuleA.js и ModuleB.js:

// moduleA.js
import { functionB } from './moduleB.js';
export function functionA() {
  console.log('functionA called');
  functionB();
}

// moduleB.js
import { functionA } from './moduleA.js';
export function functionB() {
  console.log('functionB called');
  functionA();
}

Здесь оба модуля зависят друг от друга. Когда JavaScript пытается загрузить их, он запутывается, потому что ни один из них не может быть полностью загружен без предварительной готовности другого. Это приводит к таким проблемам, как неопределенные функции или неполные модули — по сути, беспорядок.

Итак, как я обнаружил свою круговую зависимость?

Ах, ужасная ошибка, с которой началось это приключение:

Error: `reducer` is a required argument, and must be a function or an object of functions that can be passed to combineReducers.
 ❯ Module.configureStore node_modules/@reduxjs/toolkit/src/configureStore.ts:98:11

Моя первая реакция? "Подождите, что?!" — не лучший мой момент. Я был уверен, что мои редукторы на месте, поэтому эта ошибка возникла из ниоткуда. После некоторых копаний я понял, что это не проблема с отсутствующим редюсером, а циклическая зависимость, проникающая в мою настройку Redux. Конечно, выяснить это было непросто!

Настоящий герой: dpdm

Именно тогда я нашел своего спасителя: пакет npm dpdm. Этот драгоценный камень анализирует ваше дерево зависимостей и показывает, где живут эти хитрые циклические зависимости. Выполнение следующей команды дало мне четкое представление:

dpdm --no-warning --no-tree ./src/index.tsx

И вуаля! Вот что он нашел в моем проекте:

• Circular Dependencies
  01) src/stores/store.ts -> src/stores/rootReducer.ts -> src/stores/slice/authSlice.ts -> src/utilities/api.ts
  02) src/stores/rootReducer.ts -> src/stores/slice/bookingSlice.ts -> src/hooks/redux.tsx -> src/stores/types.ts -> src/stores/setUpStore.ts
  03) src/stores/types.ts -> src/stores/setUpStore.ts
  ...

Исправление: время рефакторинга!

Отчет был ясен: в моих файлах Redux было множество циклических зависимостей, в основном в store.ts, rootReducer.ts и некоторых фрагментах. Разделив часть логики, устранив ненужные зависимости и проведя рефакторинг кода, я наконец навел порядок.

Извлеченные уроки

• Циркулярные зависимости хитрые: они часто не проявляются до выполнения или во время модульных тестов, что затрудняет их отслеживание.
• Такие инструменты, как dpdm, спасают жизнь: не тратьте время на поиск импортированных файлов вручную. Пусть инструменты сделают всю тяжелую работу.
• Рефакторинг — ваш друг: иногда циклические зависимости являются признаком плохой архитектуры. Хороший рефакторинг не только устраняет непосредственную проблему, но также делает вашу кодовую базу более чистой и удобной для сопровождения.

Итак, в следующий раз, когда вы столкнетесь с одним из этих надоедливых жуков, выпейте кофе, посмейтесь и разорвите этот круг!

Удачной отладки! ?