Реализация сложных требований в React
Из -за сложных бизнес -требований, в тот момент, когда разработчик React добавляет несколько Использовать , USESTATE & usequery Он/она считает, что код такого компонента не интересен читать и изменить.
Я работал над аналогичными бизнес-требованиями для нашего компонента входа в систему:-
- При загрузке страницы входа в систему принесите предложения продуктов и подождите, пока она не закончит.
- Возьмите с пользователя на страницу ошибки, если он не удастся.
- Убедитесь, что
Product_codeПараметр запроса, присутствующий в URL, принадлежит одному из недавно загруженных продуктов в списке продуктов, если не перенаправить на страницу предложения продукта. - Если
Product_codeПараметр запроса действителен, затем убедитесь, что AccessToken присутствует в сеансе -магазине/cookie действителен и не истек, если да, перенаправить пользователя для получения потока приложений. - Если AccessToken не является действительным, загрузите последнюю маркетинговую кампанию. Подождите, пока он не загрузится, а затем перенаправьте пользователя в OAuth на основе потока входа в OAuth (мы показываем последнюю кампанию на странице входа в систему).
Я реализовал вышеизложенное, используя равнину Использовать , useQuery Аполлона и USESTATE , но код был сложным. Я потратил пару часов, позволяя понять, но не был удовлетворен конечным результатом. Большинство из вас, безусловно, имеют аналогичные бизнес -требования. Мне любопытно найти, как вы решаете такое требование, используя React или любой другой путь.
Разработка на основе StateChart
Для простого примера приложения он может выглядеть чрезмерно инженерным, чтобы использовать государственную машину (хотя conf Talks от Дэвида объясняет, как даже простое требование скрывает сложности/ошибки в нем). Мы используем xstate Для реализации длинной воронки в нашем заявлении. Я знал о государственных/переходах/событиях/охранниках в Xstate. Мы использовали его, чтобы построить скелет нашей воронки и поток на страницах. Но нам еще предстоит использовать –
Эти две концепции делают это действительно полезным для решения нетривиальных проблем реального мира с использованием карт штата. Вот как моя машина искала выше – требование –
Затем я понимаю, что спецификация диаграммы состояния (или документы Xstate) обширная, потому что она охватывает все наши варианты использования. У нас все еще есть долгий путь, чтобы полностью принять Xstate, но я уверен, что это будет стоить, так как он предлагает следующие высокие преимущества:-
- Формализм логики и Визуализация
- Простота модульного тестирования (по сравнению с единичным тестированием логики, написанной в Creact UI Components)
- Автогенерированный тестовый код E2E
- Простота Применение аналитики
Я уже вижу первые два преимущества в нашей кодовой базе, как команда, мы пытаемся достичь уровня, на котором мы можем получить выгоду (3. & 4.).
Оригинал: “https://dev.to/sutikshna/state-chart-in-real-world-1hn5”