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

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

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