我如何使用 dpdm 修复 Redux 中的循环依赖错误

打破混乱循环：Redux 循环依赖之旅

最近，我在 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。这个 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中文网其他相关文章！