小程序 redux_Redux应用程序最重要的ESLint规则

小程序 redux

by Paul Matthew Jaworski

保罗·马修·贾沃斯基(Paul Matthew Jaworski)

Redux应用程序最重要的ESLint规则 (The Most Important ESLint Rule for Redux Applications)

tl;dr Run yarn add --dev eslint-plugin-import and add "import/named": 2 to your .eslintrc rules to prevent accidentally importing constants that don’t exist to your reducers.

tl; dr运行yarn add --dev eslint-plugin-import并将"import/named": 2到您的.eslintrc规则中，以防止意外导入在reducer中不存在的常量。

If you’re developing an application using React and Redux, your reducers probably look something like this:

如果您正在使用React和Redux开发应用程序，那么reducer可能看起来像这样：

This example is pretty straight-forward. You’re only importing one constant up top.

这个例子很简单。 您只需要导入一个常量即可。

Your file structure currently looks like this:

您的文件结构当前如下所示：

.├── actions|   ├── constants.js|   └── index.js...omitted for brevity...├── reducers|   ├── accountReducer.js|   └── index.js...omitted for brevity...├── indes.js└── index.html

But as your codebase grows, your reducers will become more complicated. Organizing your files by type may no longer makes sense. So you decide to start organizing things by feature or route instead:

但是随着代码库的增长，缩减器将变得更加复杂。 按类型组织文件可能不再有意义。 因此，您决定开始按功能或路线来组织事物：

.├── actions|   ├── constants.js|   └── index.js...omitted for brevity...├── reducers|   └── index.js├── routes|   ├── accounts|   |   ├── components|   |   ├── containers|   |   ├── module|   |   |   ├── actions.js|   |   |   ├── constants.js|   |   |   └── index.js (exports our reducer)|   |   ├── styles|   |   └── index.js|   └── index.js...omitted for brevity...├── indes.js└── index.html

Awesome! Now you don’t have 100 components in our main components folder anymore. Things are a bit neater, and easier to reason about.

太棒了！ 现在您的main components文件夹中不再有100个组件。 事情变得更加整洁，并且更容易推理。

There’s a problem with your refactor, though. Suddenly this import in your reducer is now referring to a non-existent path:

但是，您的重构存在问题。 突然，在您的减速器中的此import现在引用的是不存在的路径：

import { RECEIVE_ACCOUNT_SUCCESS } from '../actions/constants';

You get an error about that path being unresolved immediately, so you change it:

您会收到有关该路径无法立即解决的错误，因此可以更改它：

import { RECEIVE_ACCOUNT_SUCCESS } from './constants';

Cool. But what if you didn’t actually define that constant in your new file?

凉。 但是，如果您实际上没有在新文件中定义该常量怎么办？

Now you’re about to experience one of the most frustrating bugs possible in a Redux app — importing an undefined constant into a reducer. Your tests will break, your app will break, and you’ll bash your head into your desk until you figure it out.

现在，您将体验Redux应用程序中最令人沮丧的错误之一-将未定义的常量导入reducer。 您的测试将失败，您的应用程序将失败，并且您将脑筋急转弯，直到弄清楚了。

The problem is that this type of bug just fails silently. ES6 imports don’t care whether or not the variable you’re importing is defined. You’ll never see an error about it.

问题是这种类型的错误只会以静默方式失败。 ES6导入不关心是否定义了要导入的变量。 您将永远不会看到有关它的错误。

ESLint进行救援！ (ESLint to the Rescue!)

The key to avoiding this type of bug is to installing eslint-plugin-import, then set one simple little rule in your .eslintrc:

避免这种错误的关键是安装eslint-plugin-import ，然后在.eslintrc设置一个简单的小规则：

"import/named": 2

That’s it! Now you’ll get an error anytime you try to import an undefined constant into one of your reducers.

而已！ 现在，当您尝试将未定义的常量导入其中的化简器中时，都会出现错误。

Edit: Unless you’re extending a base config that already includes it, you’ll also need to add "import" to the plugins section of your .eslintrc. Thanks to Dave Mac for pointing that out!

编辑：除非要扩展已经包含它的基本配置，否则还需要在.eslintrc的plugins部分中添加"import" 。 感谢Dave Mac指出这一点！

Happy coding!

编码愉快！

翻译自: https://www.freecodecamp.org/news/the-most-important-eslint-rule-for-redux-applications-c10f6aeff61d/

小程序 redux