dpdm を使用して Redux の循環依存関係のバグを修正した方法

混乱の輪を断ち切る: Redux 循環依存関係の旅

最近、Redux コードベースでバグに遭遇し、頭を悩ませました。テスト スイートが意味のないエラーをスローしたときに突然混乱が起こるのを感じたことがあるなら、その気持ちがわかるでしょう。何が起こったのか、そして最終的にどのようにして問題を発見 (そして修正) したかを次に示します。

循環依存関係とは一体何でしょうか?

循環依存関係は、2 つ以上のモジュールが直接的または間接的に相互に依存し、依存関係チェーンに無限ループを作成するときに発生します。言い換えれば、2人の友人が「あなたが先に行きなさい」と言っているのに、誰も動かないようなものです。 JavaScript では、これにより未定義のモジュールや不完全なデータが生成され、追跡が非常に困難なバグが発生する可能性があります。

犯人: 一例

2 つの 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

私の最初の反応は? 「待って、何?!」 — 私にとって最高の瞬間ではありませんでした。リデューサーが適切に設置されていると確信していたので、このエラーはどこからともなく出てきたように思えました。いくつか調べた結果、これは Reducer の欠落の問題ではなく、Redux セットアップに忍び込んだ循環依存関係であることがわかりました。もちろん、それを理解するのは簡単ではありませんでした!

本当のヒーロー: dpdm

そこで私は救世主を見つけました。npm パッケージ dpdm です。この gem は依存関係ツリーを分析し、それらの卑劣な循環依存関係が存在する場所を示します。次のコマンドを実行すると、明確なビューが得られました:

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 などのツールは命の恩人です: インポートを手動で検索することに時間を無駄にする必要はありません。面倒な作業はツールに任せましょう。
• リファクタリングはあなたの友人です: 循環依存関係は、悪いアーキテクチャの兆候である場合があります。優れたリファクタリングは、当面の問題を解決するだけでなく、コードベースをよりクリーンで保守しやすくします。

それでは、次回このような厄介な虫に遭遇したら、コーヒーを飲んで笑って、その輪を断ち切ってください!

デバッグを楽しんでください! ?

以上がdpdm を使用して Redux の循環依存関係のバグを修正した方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。