Как я создал инструмент получения профиля игрока НБА с помощью компонентов React, Redux-Saga и Styled

1656620175 kak ya sozdal instrument polucheniya profilya igroka nba s pomoshhyu

автор Джонатан Пук

1*799DwILNz4o4I_PrUqVjvw

Привет всем! Прошло много времени с тех пор, как я создал что-то из личного удовольствия или любопытства, поэтому я серфинг в Интернете, исследуя крутые API.

Поскольку пришло время плей-офф НБА (к сожалению, я фанат Никс), я решил проверить, существует ли API, содержащий данные о каждом игроке, который сейчас в НБА — и, черт возьми, да, был.

Кроме того, проект, над которым я работаю на своей работе, познакомил меня с двумя потрясающий библиотеки вызов редукс-сага и стилизованные компоненты. Они очень увлекательны, и это две вещи, которые я точно планирую попробовать и использовать во всех своих будущих проектах.

Давайте создадим приложение React с этими библиотеками!

Прежде чем погрузиться, давайте просто немного поговорим о redux-saga и стилизованных компонентах и ​​почему они удобны.

Redux-Saga

В Redux действия и редукторы чистые, то есть не имеют никаких побочных эффектов.

Примером побочного эффекта может служить что-то вроде запроса на обслуживание. Если вы делаете запрос, он может быть неудачным или вернуть результат другого типа, даже если вы всегда посылаете тот же запрос.

Итак, если ваши редукторы и действия чисты, где можно справиться/поместить побочные эффекты? Ну, redux-saga – это решение. Это позволяет прослушать действия, выполнить побочный эффект, а затем отправить другое действие.

Я знаю, разговоры дешевы. Покажи мне код.

Вы готовы увидеть пример этого зверя на работе?

Короче говоря, у нас есть функция, которая прослушивает всякий раз, когда действие типа ‘IMAGE_FETCH_REQUESTED’ отправлено. Когда он его идентифицирует, он вызовет функцию fetchImage.

Внутри функции fetchImage мы просто делаем специальную call к методу на нашем service объекта, проходящего вдоль ст userId изображение профиля, которое мы хотим получить. Результат сохраняется внутри нашей переменной profileImage.

Вскоре мы сообщаем нашему магазину, что мы успешно захватили изображение и хотим передать его для сохранения. Поэтому мы просто отправим действие с put с типом 'IMAGE_FETCH_SUCCEEDED' и передать изображение как полезную нагрузку. С остальными справится наш редуктор.

Но если есть какая-то ошибка, мы просто отправляем действие с типом'IMAGE_FETCH_FAIL' и передать ошибку как полезную нагрузку.

Его красота заключается в том, как хорошо он читается и посиживает в пределах обычного блока попыток.

Не стесняйтесь читать больше о redux-saga.

Стилизованные компоненты

Открытие стилизованных компонентов меня поразило.

У меня всегда были проблемы со структурированием и написанием CSS внутри программы React. Что-то пошло не так, и мне это показалось беспорядочным. В частности, названия классов были жесткими.

Вся идея React состоит в том, чтобы быть модульным: вы пишете компонент один раз и можете использовать его повсюду. Но при укладке таких компонентов мы все равно отдаем им класс имя чтобы нацелить их с помощью CSS.

Макс Стойбер, соавтор стилизованных компонентов, прекрасно высказался, когда сказал:

Если вы используете имя каждого класса всего один раз, зачем вам вообще имя класса?

Услышав эти слова, я понял, что для меня стилевые компоненты.

Давайте посмотрим, что и этот работает сейчас:

Здесь у нас есть основной функциональный компонент: кнопка, которая почти ничего не делает даже если она заставляет вас сделать свой шаг.

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

Мы импортируем styled из библиотеки. Подумайте об этом как о фабрике, позволяющей создавать узлы HTML, которые вы все знаете и любите.

Создаем узел по своему вкусу. В этом случае кнопка и span со своими стилями. Затем мы назначаем его переменной по нашему выбору.

Теперь мы ссылаемся на переменные и размещаем их в нашем функциональном компоненте для воспроизведения.

Это так просто.

Мне очень нравится то, что вы все еще можете написать знакомый вам CSS в файле JS. Кроме того, он хранит все красиво и модульно – все расположено в одном файле, легко читается и усваивается!

Вы можете узнать больше о styled-компоненты здесь.

Мы создадим приложение, в котором пользователи смогут искать игрока, используя свое имя и фамилию. Наша сага (redux-saga) получит данные игрока, включая статистику и их снимок и сохранит их в нашем магазине redux. А используя стилизованные компоненты, мы сделаем всю эту информацию более презентабельной.

Часть 1 – Настройка нашего приложения и react-redux.

В этом проекте мы будем использовать приложение create-react-app, поэтому, если вы еще не установили его, просто запустите npm install -g create-react-app .

Когда это будет сделано, мы побежим create-react-app nba-players .

Теперь, после того, как все установки и леса сделаны, мы сделаем cd nba-players а затем установите модули, которые нам понадобятся npm install --save redux react-redux redux-saga styled-components axios .

Настройка нашего магазина redux

Это будет краткая инструкция по настройке нашего магазина, поскольку это руководство посвящено redux-saga и стилизованным компонентам, а не react-redux/redux.

Внутри вашего src папку, мы создадим папку под названием store и создавать наши index.js файл.

store/index.js

Мы будем использовать Redux DevTools, чтобы увидеть, что происходит под капотом нашего магазина. Вы можете скачать расширение Chrome здесь.

Давайте создадим наши редукторы.

Создайте папку под названием reducers в корне вашего store папку и создайте два следующих файла:

reducers/index.js

reducers/player.js

Давайте создавать наши действия

Создайте папку под названием actions в корне вашего store папку и создайте два следующих файла:

actions/actionTypes.js

actions/player.js

После создания всех этих частей давайте подключим магазин к нашей программе React!

Перейдите к src/index.js и добавить следующее:

Мыло, давайте протестуем и убедимся, что все работает, как ожидалось.

Вернувшись в наш терминал, мы побежим npm run start Чтобы запустить наше приложение React, откройте инструменты разработчика и перейдите на вкладку «Redux». Щелкните вкладку «Состояние» в инструментах разработчика Redux.

Вы должны увидеть что-то подобное 🙂

1*klP5Nqu0Bwibd-KI9SimWw

Прекрасно, у нас есть все необходимое, чтобы начать.

Часть 2 — Redux Saga

Мы готовы использовать API игрока NBA, чтобы получить данные и скачать их в наш магазин!

Давайте напишем нашу первую сагу.

Внутри нашего src/store папку, мы создадим папку под названием sagas и создайте файл под названием index.js .

Это в основном служит нашим наблюдателем/вратарем.

Line 8 сидит и слушает некоторые типы действий, которые мы ему даем. Когда действие проходит через него, оно вызывает функцию, в этом случае retrievePlayer. Мы создадим это сейчас.

В той же папке мы создадим файл под названием player.js и он будет содержать следующее:

Функция генератора retrievePlayer – это то, где происходит магия, и давайте рассмотрим это.

Функция имеет доступ к прошедшему действию. Если вы можете упомянуть от нашего создателя действий в actions/player.js передаем имя.

Мы будем использовать деструктуризацию ES6, чтобы получить имя и фамилию из объекта name, подключенного к полезной нагрузке действия.

Используя redux-saga, мы call функцию fetchPlayerData и передайте детали имени.

fetchPlayerData сделает вызов GET в API игроков NBA и вернет ответ. Ответ будет сохранен внутри переменной stats.

Доступ к изображению игроков так же прост, как добавление имени и фамилии в конечную точку API, поэтому мы делаем именно это.

Мы сохраняем наши две новые части данных в объекте под названием playerProfile.

Затем мы используем put redux-saga, отправляющий действие. Здесь мы придаем ему тип GET_PLAYER_SUCCESS с нашим новым профилем игрока как полезной нагрузкой.

Если что-то пойдет не так, мы просто отправляем действие с типом GET_PLAYER_FAIL и передать ошибку как полезную нагрузку.

Это!

Редуктор наших игроков, который мы сделали раньше reducers/player.js сделает все остальное после получения действий, которые мы отправили.

Однако есть одна последняя вещь, которую нам нужно сделать, прежде чем наши саги заработают.

Внутри store/index.js нам придется внести некоторые изменения.

Теперь это должно выглядеть следующим образом

Теперь мы готовы создать некоторые компоненты, которые позволят нам искать игрока и видеть его изображения и статистику 🙂

Часть 3 — Стилизованные компоненты

components/Search.js

components/StatBox.js

components/PlayerPhoto.js

components/Player.js

После создания всех наших компонентов пора импортировать их в наш App.js

Все подключено и готово к работе. Просто введите полное имя игрока по вашему вкусу, например, Леброн Джеймс или Стивен Карри, и вы увидите что-то подобное.

1*oVmg6dXWrMrl87VnXUxwog

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

Также помните, что мы добавили a loading недвижимость в нашем магазине redux state.player.loading ? Почему бы не сделать UX немного приятнее, указав какое-либо сообщение о загрузке, когда для загрузки установлено значение true?

Мы вместе создали основу программы – теперь продолжайте и придайте ей свой личный оттенок 🙂

Если вам нужно, вы можете найти исходный код здесь.

Как всегда, мой ящик открыт для всех, кто нуждается в дополнительном совете или если у вас есть вопросы.

Не стесняйтесь связаться со мной на любой из следующих платформ!

Instagram | LinkedIn | Twitter

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *