Автор оригинала: José Proença.
Фото кредит: Академия Филлипса, Андовера через VisualHunt. / CC BY-NC-SA
Вступление
Это первая часть серии статей о примененном исследовании для веб-приложения, реализованного с использованием Redux и Угловой Отказ В этой статье нет зависимости от угловых, оно применяется везде, где вы нашли redux. Проект следует за архитектурой, изображенной на Предыдущая статья , но читая эту статью до этого не нужна.
Для удобства ссылки здесь есть другие статьи в серии:
- Тематическое исследование PT.1: планирование бизнес-логики с использованием Redux (эта статья)
- Тематическое исследование PT.2: Реализация Redux на угловой (для публикации)
- Исследование случаев PT.3: тестирование эффектов redux на угловой (для публикации)
В этом веб-приложении этого проекта является онлайн-тестом (или Quiz), который, хотя функционал, упрощенный, так как он служит только в качестве предмета для этого случая:
- Прочитайте данные экзамена с сервера
- Разрешить односторонние ответы, нет ответов с открытым/текстом
- Время экзамена, используя серверный таймер
- Разрешить пользователю закончить экзамен ранее
- Оценить ответы в конце и дать результат
- Смешать сервер на стороне клиента, включая дату экзамена.
Снимок веб-приложения реализован для этой серии статей. Исходный код включен мой репозиторий Github .
В этой статье я представлю планирование бизнес-логики, используя подход Redux. Я обычно делаю эти планировки на приложении Notes или Text с хорошей поддержкой пуль и изложении. Я принимаю неформальный подход без проблем синтаксиса, концентрируясь на мышлении решения.
Строительные блоки
У Redux есть эти объекты, которые уже должны быть знакомыми: государство, действия и редукторы (пожалуйста, проверьте веб-сайт redux Учебные пособия в списке для многих указателей). Состояние и действия являются данными, редукторы являются функциями. Но мы не можем поставить всю бизнес-логику в эти функции, так как они должны быть чистый То есть детерминированные, использующие только предоставленные данные состояния и действия, а также они не могут иметь внешние побочные эффекты. Итак, они не могут вызвать конечную точку сервера, например. Это где все ECO-SYSTEL ECO-SYSTEM приходит. И я сосредотачиваюсь на концепции эффектов (или эпох). «Эффекты», как называют @ngrx Библиотека («EPICS» – это имя, используемое в похожий « redux-наблюдаемое библиотеку и« саги »на Redux-Saga ) являются цепными реакциями на определенные действия. Одно действие может вызвать эффект, что приводит к большему количеству действий, отправленных асинхронно. В то время как в этом кодекс «эффект» может получить доступ к внешнему миру, похожему на конечные точки сервера и соответствующим образом создавать действия.
Разложив решение, используя все эти объекты, сначала может быть немного пугающим, поэтому я использую тестовый случай в этой статье. Одним из них всегда имейте в виду, является разделение между бизнес-логикой и просмотром слоя (то есть все пользовательский интерфейс, показывающий данные, входы чтения, навигацию и взаимодействие). Со всеми четырьмя сущностями (государством, действиями, редукторами, эффектами) можно построить веб-приложение без головы, которое отлично работает в тестах и взаимодействует с сервером и всеми. Уровень просмотра веб-сайтов проецирует только состояние в действия пользовательского интерфейса и выпуска на вход пользователя. Кроме того, он может иметь локальную просмотр логики (например, скрывать и показывать, анимацию и такое), но не изменять состояние приложения. Для достижения этого слой просмотра должен выделять действие!
Для каждого из четырех упомянутых объектов, давайте посмотрим, как мы можем выполнить логику для веб-приложения Test.
Состояние
Мои снимки Notes для состояния приложения:
«Пользователь» верхний уровень будет хранить аутентифицированную информацию о пользователе. Он не был реализован в этом проекте, но я оставил его здесь, чтобы лучше проиллюстрировать структуру состояния приложения. «Экзамен» хранит информацию об экзамене, вопросы и ответы и ответы и треки «маршрутизатора» на каком странице приложения пользователя.
На данный момент рассматриваемое состояние является необходимым для бизнес-логического контекста. Позже будет необходима дополнительная информация о состоянии: просмотреть состояние для логики просмотра, как поля ввода в формах. Аналогичным образом, некоторые действия могут быть добавлены при работе на логике просмотра. На данный момент давайте сконцентрируемся на бизнес-логике.
Действия и редукторы
На этой записке я заставляю все действия, которые я думаю, необходимы и специальная логика редуктора за пределами Установка состояния. Состояние настройки предполагается, когда действие имеет совпадающие имена свойств состояния. Еще раз на этой фазе я хочу сосредоточиться на том, что важно, поэтому предполагается простое изменение состояния.
Этот список концентрирует как действия, так и редукторные логики (как суб-тема действий), просто чтобы держать вещи Сухой Отказ
Обратите внимание, что есть три вида действий:
- Команды : Exam_start, exam_end, вопросы_answer. Значит, кто-то должен сделать что-то в этом, редуктор и/или «эффект» следует позаботиться об этом. Обычно эти действия происходят в UI.
- Информативный : Exam_status, exam_time, exam_score, вопросы_current. Используется для прямого изменения состояния и обычно заканчивается отражающими в UI. Они обычно не вызывают эффекты, но возникают в них.
- Данные доступны : Exam_data, вопросы_data. Обычно излучается эффектами при получении данных с сервера. Данные в рамках полезной нагрузки и должны быть включены в состояние на редукторы.
На более крупном проекте или с большим количеством людей, которые я бы ознаменовал добрым действиям на заметки, поэтому его предполагаемое использование явно.
Обратите внимание на логику редуктора на последней строке Note: «Сбрасывает существующий ответ в нельзя многоизотных вопросов». Это то, что редуктор для вопросов_answer () должен позаботиться о за пределами состояния настройки.
Эффекты
Для логики экзамена нам нужны только два эффекта, которые срабатывают на экзамене_Start (), а другой, с помощью экзаменации () (). Примечание выше, что они не делают никаких изменений в состоянии при прохождении редукторов. Эти действия предназначены для обработки эффектами, внедряя некоторую логику и доступ к серверу. EXATE_START () отправляется UI при нажатии кнопки «Запуск экзамена». Экзаменационная связь может быть отправлена пользователем UI или таймером. Символ «>» с префиксом имени действия означает, что это действие, которое нужно отправлять в этот момент.
Обратите внимание, что серверные боковые сервисы вызываются в логике эффектов, и результаты используются для излучения новых действий.
Существует два действия, относящиеся к маршрутизатору, не указанному в списке действий выше. Это связано с тем, что они относятся к системе навигации навигации в рамках Application (AKA маршрутизации):
- Навигация (местоположение): сообщает, что приложение переходит на указанное местоположение или состояние маршрутизатора.
- Navipate_go (местоположение): делает приложение переместить в указанное местоположение или состояние маршрутизатора. После этого будет отправлена соответствующая «навигация (местоположение)» в конечном итоге.
При навигации по веб-приложению событие прибытия на странице должно выстрелить какую-то логику. На моих замечаниях этой логики «Exam_Start», «Exam_Question» и «Exam_Result» являются неформальными идентификаторами страницы. Не принимайте их для действий, поскольку они появляются только в качестве аргументов на навигационные действия.
Могут быть соблазн поставить эту логику навигации на компонентах пользовательских интерфейсов, которые соответствуют этим страницам, а именно по процедуре инициализации компонентов. Компоненты могут создавать действия, поскольку они делают, когда пользователь взаимодействует, но размещение этой логики на представлении имеет две проблемы: утечки бизнес-логики в компоненты просмотра, а также разбивает потрясающие возможности Redux Tree-Travel, предоставляемые Devtools расширение Отказ
Резюме
На этой статье я представлял способ соответствовать вашу бизнес-логику в Redux с архитектурой побочных эффектов, таким образом, что бизнес-логика и слой данных полностью отделены от уровня просмотра. Это может быть очень важно для более крупных и/или специализированных команд, позволяющих разные роли прогрессировать более независимо.
В следующей статье мы увидим, как это может быть реализовано в угловом и @ngrx. Полный код уже в Это репо Отказ
Повеселись!
PS: Эта статья также появляется на Средний Отказ