Я только что завершил свой завершающий проект для Flatiron School, буткемпа по кодированию, который я посещал на Манхэттене, Нью-Йорк, в течение последних 4 месяцев. Нам было поручено создать проект по нашему собственному выбору, который использует фреймворк React с бэкендом rails. Кроме того, применение редукса было необходимо для удовлетворительного завершения в соответствии с рубрикой. Я создал приложение NFL Pickem, в котором пользователи могут еженедельно отправлять список выборов, чтобы побороться за денежные призы.

Ссылка на GitHub: https://github.com/JasonBeneducci/NFLPickemApplication

Основные характеристики и функциональные возможности:

Маршрутизация — я применил React Router для создания компонента NavBar, который управляет навигацией по всему веб-приложению. Маршруты в NavBar на данный момент относительно просты, но позволяют пользователю отправить список выборов, просмотреть все списки выборов, которые были отправлены за эту неделю, и получить доступ к странице о сайте.

React — я написал свой код Javascript в среде React для управления состоянием и создания сочетания статических и динамических компонентов. Изображение страницы, которая позволяет пользователям выбирать список игр, показано ниже.

Пользователь просто просматривает список игр на эту неделю и нажимает на команду, которая, по его мнению, выиграет игру. При наведении курсора мыши на изображение это изображение немного масштабируется, а при выборе оно будет отображаться с рамкой вокруг него с использованием свойств CSS. По мере того, как пользователь делает больше выборов, верхняя панель будет продолжать постепенно отображать его планшет с изображениями команд, которые он выбирает. Я сделал этот компонент прикрепленным к верхней части, чтобы было легче увидеть, сколько игр осталось выбрать пользователю и кого он выбрал.

Redux — я применил Redux, чтобы позволить компонентам самого нижнего уровня иерархии компонентов иметь доступ к своим свойствам и запускать изменения состояния без необходимости передавать свойства через лишние компоненты. Используя Redux, мне приходилось писать функцию mapStateToProps везде, где мне нужен был компонент, чтобы иметь доступ к свойствам, которые были доступны в глобальном хранилище. Кроме того, для компонентов, которым нужно было инициировать изменение состояния, мне пришлось написать функцию mapDispatchToProps, чтобы позволить этому компоненту получить доступ к диспетчерской функции для вызова и действию для передачи редюсеру и инициировать изменение состояния с типом этого действия и полезной нагрузкой.

Интеграция с API. Бэкэнд rails настроен на выполнение выборки в Rundown API и извлечение реальных игр и счетов из этих игр. Такие извлеченные данные затем сохраняются в серверной части в таблице «игры» из-за ограниченного количества запросов, которые я могу отправить на конечную точку в моем бесплатном плане для этого API.

Промежуточное ПО Thunk.В соответствии с использованием потока Redux я использовал промежуточное ПО «thunk» для обработки асинхронных действий выборки в моей программе. «Thunk» позволил мне вернуть функцию внутри моего создателя действия, которая вызывала бы отправку с действием-заполнителем, чтобы установить состояние на заполнитель, пока не будет разрешена выборка, которая происходила в фоновом режиме. Затем эта функция снова вызовет диспетчер с данными из разрешенного обещания выборки. Я специально использовал промежуточное ПО «thunk» для создания значения джекпота, которое извлекает из серверной части количество планшетов в базе данных и устанавливает значение джекпота в хранилище равным этому числу.

Дополнительные функции:

Приложение еще не полномасштабное. В настоящее время я разрабатываю шаблон аутентификации, чтобы пользователи могли входить в систему и регистрироваться. С этими пользователями я мог бы создавать пользовательские балансы и устанавливать отношения между таблицами в моем бэкэнде rails, чтобы в течение нескольких недель иметь несколько пользователей в списках игр. Я также намерен немного подчистить стиль CSS и разрешить пользователям депозит и вывод средств со своих счетов. Наконец, я хочу настроить задание cron, чтобы мне не приходилось вручную инициировать выборку данных в API. Вместо этого программа будет знать, когда выполнять выборку на основе временного интервала.

Самая сложная функция:

Самой сложной функцией было сохранение джекпота в глобальном хранилище после выполнения выборки внутри создателя действий. Проблема с этой функцией была связана с необходимостью использовать «преобразователь» для обработки этого асинхронного действия. «Thunk» — отличный компонент промежуточного программного обеспечения, как только вы научитесь его использовать, поскольку он позволяет вам возвращать функцию внутри создателя действия, которая вызывает диспетчеризацию во второй раз, но это определенно проверит ваши знания Javascript, когда вы сначала научиться им пользоваться.