Добро пожаловать в часть 11 этого всестороннего обзора и краткого изложения курса Cory House Pluralsight Создание приложений с помощью React и Redux в ES6.
Кори — Microsoft MVP в C#, основатель OutlierDeveloper.com, заядлый технический читатель и спикер.
Он верит в чистый код, прагматичную разработку и адаптивные нативные пользовательские интерфейсы.
Также в этой серии:
Часть 1 — Введение и предыстория
Часть 3 — Подходы React Component
Часть 4 — Начальная структура приложения
Часть 6 — Действия, хранилища и редукторы
Часть 7 — Подключение React к Redux
Часть 9 — Асинхронность в Redux
Часть 10 — Асинхронная запись в Redux
Часть 11. Статус асинхронного режима и обработка ошибок
вступление
Кори рассказывает о проблемах, которые нам нужно решить в этом модуле:
- Нет индикатора начальной загрузки
- Нет обратной связи после нажатия кнопки "Сохранить"
- API не работает молча
Создать компонент предварительного загрузчика
Начнем с создания LoadingDots.js
Это компонент, который отображает список точек. Мы можем настроить скорость отображения и количество точек по своему усмотрению.
Кори демонстрирует это, добавляя его рядом со ссылками на страницы. Далее мы хотим отображать это только при выполнении вызова AJAX.
Создание действий состояния AJAX
Мы добавляем ajaxStatusActions.js, и здесь у нас есть функция beginAjaxCall.
Создать редуктор статуса AJAX
Мы добавляем ajaxStatusReducer.js с двумя функциями: ajaxStatusReducer и вспомогательной функцией с именем actionTypeEndsInSuccess.
ajaxStatusReducer работает, увеличивая счетчик, называемый состоянием.
actionTypeEndsInSuccess проверяет, являются ли последние 8 символов типа действия «_SUCCESS»
Это означает, что у нас есть общее решение, которое будет работать для всех наших вызовов AJAX.
Мы также должны не забыть добавить наш новый редуктор к нашему корневому редьюсеру.
Вызов Начать AJAX в Thunks
Сначала мы обновляем classActions и authorActions, добавляя:
импортировать {beginAjaxCall} из ‘./ajaxStateActions’.
Затем мы обновляем loadCourses и loadAuthors, добавляя больше вызовов для отправки с beginAjaxCall() в качестве нашего параметра.
Здесь Кори также обсуждает оптимистичные обновления Ajax.
Скрыть предварительный загрузчик в зависимости от статуса
Мы добавляем функцию mapsStateToProps в App.js, и это устанавливает наше свойство загрузки в зависимости от того, выполняются ли какие-либо вызовы AJAX. Нам также нужно, чтобы этот класс использовал соединение.
Затем мы обновляем Header.js, чтобы использовать наше новое логическое свойство загрузки.
Запускаем наше приложение, видим в консоли следующую ошибку:
Неперехваченная ошибка: Редюсер «ajaxCallsInProgress» вернул неопределенное значение во время инициализации. Если состояние, переданное редюсеру, не определено, вы должны явно вернуть начальное состояние. Начальное состояние не может быть неопределенным.
Оказывается, это простая опечатка в initialState.js.
После исправления мы видим, что предварительный загрузчик работает до тех пор, пока наши данные не будут загружены.
Используйте промисы для ожидания thunks
Кори показывает нам, что когда мы нажимаем «Сохранить» на странице управления курсами, мы сразу же попадаем на страницу со списком курсов. Это проблема, потому что он показывает устаревшие данные за долю секунды до обновления списка.
Мы можем улучшить взаимодействие с пользователем, перейдя на новый экран только после завершения обновления. Мы достигаем этого с помощью обещаний.
В функции saveCourses мы просто добавляем функцию .then(() =› this.redirect()) и создаем функцию перенаправления, используя существующий код.
Мы видим небольшое улучшение взаимодействия с пользователем, но что нам действительно нужно, так это способ обеспечить немедленную обратную связь с пользователем о том, что кнопка сохранения была нажата.
Создать индикатор загрузки отправки формы
Мы отключаем кнопку отправки при нажатии и показываем компонент точек загрузки.
Это включает в себя установку свойства сохранения в значение true в нашей функции saveCourse, а затем обратно в значение false в нашей новой функции перенаправления.
Мы передаем наше свойство сохранения в CourseForm и делаем некоторые переименования с загрузки на сохранение. Это заставит наше приложение работать, как задумано.
Показать уведомление о сохранении
В этом клипе мы показываем уведомления об успешном сохранении, используя библиотеку Toastr Джона Папы.
Эта библиотека включает в себя CSS, и нам нужно импортировать его в index.js.
Мы видим, что toastr действительно прост в использовании — мы просто вызываем toastr.success с нашим сообщением об успехе и вуаля!
Это был счастливый путь
Далее смотрим на грустный путь😦
Обработка ошибок
Поскольку мы используем фиктивный API, теперь намного проще протестировать неудачный вызов AJAX.
Видим, что приложение зависло — вечно работает прелоадер и мы никуда не лезем.
Чтобы улучшить этот опыт, мы смотрим на нашу функцию saveCourse в ManageCoursePage.js — здесь отсутствует какая-либо обработка ошибок!
Мы используем нашу новую библиотеку toastr, чтобы уведомлять наших пользователей
.catch(error =› {
toastr.error(error);
});
Мы также сбрасываем свойство сохранения обратно в false, чтобы пользователь мог повторить попытку.
Когда мы запускаем это, мы видим, что всплывающее уведомление появляется правильно, и кнопка сохранения снова активна, но предварительный загрузчик продолжает работать снова и снова. Чтобы исправить это, нам нужно отправить новое действие.
Кори показывает нам, как добавить новый тип действия, AJAX_CALL_ERROR, добавить создателя соответствующего действия в actionStatusActions.js и обновить преобразователь курса для отправки нашей функции ajaxCallError.
Мы видим, что это исправлено: как только появляется тост, точки загрузки исчезают!
Перейти к Часть 12 — Тестирование React
