Автор оригинала: FreeCodeCamp Community Member.
Пол Мэтью Яворски
TL; DR Беги пряжа Добавить --dev eslint-plugin-import и добавить «Импорт/название»: 2 к вашему .eslintrc Правила для предотвращения случайно импортирующих констант, которые не существуют для ваших редукторов.
Если вы разрабатываете приложение, используя Реагировать и Redux Ваши редукторы, вероятно, выглядят что-то подобное:
Этот пример довольно прямой. Вы только импортируете одну константу вверху.
Ваша структура файлов в настоящее время выглядит так:
.├── actions| ├── constants.js| └── index.js...omitted for brevity...├── reducers| ├── accountReducer.js| └── index.js...omitted for brevity...├── indes.js└── index.html
Но поскольку ваша кодовая база растет, ваши редукторы станут более сложными. Организация ваших файлов по типу, больше не имеет смысла. Таким образом, вы решите начать организацию вещей по функциям или маршруту вместо этого:
.├── 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
Потрясающие! Теперь у вас больше нет 100 компонентов в папке основных компонентов больше. Вещи немного нет, и легче рассуждать.
Хотя есть проблема с вашим рефактором. Внезапно это Импорт В вашем редукторе сейчас ссылается на несуществующий путь:
import { RECEIVE_ACCOUNT_SUCCESS } from '../actions/constants';Вы получаете сообщение об этом пути нерешено, чтобы вы изменили его:
import { RECEIVE_ACCOUNT_SUCCESS } from './constants';Прохладный. Но что, если вы на самом деле не определили эту константу в вашем новом файле?
Теперь вы собираетесь испытать один из самых разочаровывающих ошибок, возможно в приложении Redux – импортировать неопределенную константу в редуктор. Ваши тесты сломаются, ваше приложение сломается, и вы будете нанести голову в свой стол, пока вы не поймете.
Проблема в том, что этот тип ошибки просто не работает. Импорт ES6 не заботится о том, определяется ли вариабельность, определяемая вами. Вы никогда не увидите ошибку об этом.
Eslint на спасение!
Ключ, чтобы избежать этого типа ошибки для установки Eslint-Plugin-Import Затем установите одно простое правило в вашем .eslintrc :
"import/named": 2
Вот и все! Теперь вы получите ошибку в любое время, когда вы пытаетесь импортировать неопределенную константу в один из ваших редукторов.
Редактировать: Если вы не продлеваете базовый конфиг, который уже включает в себя, вам также нужно добавить «Импорт» на раздел плагинов вашего .eslintrc Отказ Благодаря Дейв Мак за то, что указывает на это!
Счастливое кодирование!
Оригинал: “https://www.freecodecamp.org/news/the-most-important-eslint-rule-for-redux-applications-c10f6aeff61d/”