Bagaimana Saya Membetulkan Pepijat Ketergantungan Pekeliling dalam Redux Menggunakan dpdm

Memecah Bulatan Kekeliruan: Perjalanan Ketergantungan Pekeliling Redux

Baru-baru ini, saya terjumpa pepijat dalam pangkalan kod Redux saya yang menyebabkan saya menggaru kepala. Jika anda pernah merasakan gelombang kekeliruan yang tiba-tiba apabila suite ujian melemparkan ralat yang tidak masuk akal, anda akan tahu perasaan itu. Inilah yang berlaku dan cara saya akhirnya menemui (dan membetulkan) isu itu.

Apakah di Bumi adalah Kebergantungan Pekeliling?

Satu pergantungan bulat berlaku apabila dua atau lebih modul bergantung antara satu sama lain—secara langsung atau tidak langsung—mencipta gelung tak terhingga dalam rantai pergantungan. Dalam erti kata lain, ia seperti dua rakan berkata, "Anda pergi dahulu," tetapi tiada siapa yang bergerak. Dalam JavaScript, ini boleh mengakibatkan modul tidak ditentukan atau data tidak lengkap, yang membawa kepada pepijat yang boleh menjadi sangat sukar untuk dikesan.

The Culprit: Contoh

Bayangkan dua fail JavaScript, moduleA.js dan 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();
}

Di sini, kedua-dua modul bergantung antara satu sama lain. Apabila JavaScript cuba memuatkannya, ia menjadi keliru kerana kedua-duanya tidak boleh dimuatkan sepenuhnya tanpa yang lain bersedia terlebih dahulu. Ini membawa kepada masalah seperti fungsi yang tidak ditentukan atau modul yang tidak lengkap—pada asasnya, keadaan huru-hara.

Jadi, Bagaimana Saya Menemui Kebergantungan Pekeliling Saya?

Ah, kesilapan yang menakutkan yang memulakan pengembaraan ini:

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

Reaksi pertama saya? "Tunggu, apa?!" — bukan saat terbaik saya. Saya pasti pengurang saya ada di tempatnya, jadi ralat ini nampaknya entah dari mana. Selepas beberapa penggalian, saya menyedari ini bukan isu pengurangan yang hilang tetapi pergantungan bulat yang menyelinap ke dalam persediaan Redux saya. Sudah tentu, memikirkan perkara itu tidak mudah!

Wira Sebenar: dpdm

Ketika itulah saya menemui penyelamat saya: pakej npm dpdm. Permata ini menganalisis pepohon pergantungan anda dan menunjukkan kepada anda tempat pergantungan pekeliling licik itu tinggal. Menjalankan arahan berikut memberi saya pandangan yang jelas:

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

Dan voilà! Inilah rasa apa yang ditemui dalam projek saya:

• 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
  ...

Pembaikan: Masa Pemfaktoran Semula!

Laporan itu jelas: terdapat sekumpulan kebergantungan bulat dalam fail Redux saya, terutamanya dalam store.ts, rootReducer.ts dan beberapa kepingan. Selepas membahagikan beberapa logik, memecahkan kebergantungan yang tidak perlu dan memfaktorkan semula kod, akhirnya saya menyusun semula perkara itu.

Pengajaran

• Kebergantungan bulat adalah licik: Ia selalunya tidak muncul sehingga masa jalan atau semasa ujian unit, menjadikannya sukar untuk dikesan.
• Alat seperti dpdm adalah penyelamat: Jangan buang masa mencari secara manual melalui import. Biarkan alatan mengangkat berat.
• Pemfaktoran semula ialah rakan anda: Kadangkala kebergantungan bulat adalah tanda seni bina yang buruk. Refactor yang baik bukan sahaja membetulkan isu segera tetapi juga menjadikan pangkalan kod anda lebih bersih dan lebih boleh diselenggara.

Jadi, apabila anda terserempak dengan salah satu pepijat yang menjengkelkan ini, ambil kopi, ketawa dan pecahkan bulatan itu!

Selamat menyahpepijat! ?

Atas ialah kandungan terperinci Bagaimana Saya Membetulkan Pepijat Ketergantungan Pekeliling dalam Redux Menggunakan dpdm. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!