Держите свой код под контролем
Технический долг может быстро накапливаться при создании приложения с нуля. Такие фреймворки, как React и Redux, предоставляют отличные шаблоны для модульной структуры кода.
И мы живем в идеальном мире, так что это все, что нам когда-либо понадобится!
За исключением нас и это не так.
При использовании React и Redux я всегда дохожу до точки, когда делаю шаг назад и думаю: «Вау, когда это стало таким грязным?». Это вызывает перетасовку, и после устранения всех Line x:y: ‘somethingImportant’ is not defined no-undef ошибок я, наконец, доволен.
Пока, конечно, это не случится снова, через несколько недель.
Такой код требует постоянного ухода. Ему нужна любовь и ласка. Приручите зверя, сделав его сильнее. Структурирование непослушного кода требует всеобъемлющей стратегии.
Для React и Redux я использую то, что мне нравится называть IARS. Произносится как «ИЭЭРРРРЖС».
«Э-Э-Э-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р-Р»
МАРС
Как хотите, IARS означает Взаимодействия, Действия, Редукторы, Селекторы.
Вот разбивка.
Взаимодействия
Именно здесь выполняется тяжелая работа, вызванная активностью пользователя. Сохранение чего-то нового? Поместите функциональность здесь и экспортируйте ее, чтобы интерфейсный компонент мог получить к ней доступ.
Все изменения в вашем приложении должны начинаться отсюда. Отправлять действия из interactions.js.
Пример: я много занимаюсь разработкой блокчейн-децентрализованных приложений, поэтому на рис. 1 показан пример функции в interactions.js, загружающей игрока из игры, которую я создаю.
Единственная внешняя зависимость здесь — playerDetailsLoaded из actions.js.
tennisPlayer — это экземпляр смарт-контракта в блокчейне. Он хранит список игроков и предоставляет общедоступный массив players, который вызывается с помощью id для получения одного игрока.
На рис. 2 показано, как он вызывается из компонента.
Действия
Действия — это то, что диспетчер использует для взаимодействия с редьюсерами. Через некоторое время ваш файл actions.js будет выглядеть так, как показано на рис. 3.
В строке 55 показана функция playerDetailsLoaded, вызываемая из диспетчера в interactions.js.
Этот файл довольно быстро разрастется, поэтому целесообразно превратить actions.js в каталог действий и логически разделить действия. Подробнее об этом позже.
Редукторы
Редукторы — это то, что изменяет данные в хранилище избыточности. Если вы раньше использовали Redux, вы знаете, как они выглядят. На рис. 4 показан пример нашего редуктора PLAYER_DETAILS_SELECTED в строке 22.
Селекторы
Селекторы — это то, что компоненты используют для доступа к данным в хранилище избыточности. Я использую комбинацию lodash и reselect в selectors.js. На рис. 5 показан фрагмент из selectors.js, в котором выбор используется для получения selectedPlayerDetails из хранилища избыточности.
На рис. 6 показано, как вызвать его из компонента.
И вот оно! От компонента к взаимодействию, к действию, к редюсеру, к селектору и обратно к компоненту.
Самое замечательное в этом шаблоне то, что каждый компонент должен знать только о нескольких взаимодействиях и нескольких селекторах, сохраняя код компонента чистым.
Растущий
Начните с папки redux/ со следующими файлами:
- взаимодействия.js
- действия.js
- редукторы.js
- selectors.js
По мере роста приложения и когда вы чувствуете, что файлы становятся слишком большими (возможно, более нескольких сотен строк каждый), реструктурируйте свою папку redux, чтобы иметь папку для каждого из них. Внутри каждой папки разделите код на логические файлы.
"ИЭЭЭРРРРРРРР"
