Лучшая практика обработки данных из вызова API и рендеринга компонентов React
Я новичок в React и ищу лучшие практики для конкретной ситуации в моем React/Redux/Firebase PWA. Прямо сейчас меня интересует часть, которая по сути представляет собой оболочку для Yelp API.
У меня есть основной компонент, который запрашивает Yelp API при загрузке (внутри componentDidMount) на основе пользовательских настроек, полученных в другом месте приложения. Этот компонент также запрашивает API при отправке формы с пользовательским вводом. Он перебирает данные из обоих и передает реквизиты дочернему компоненту. Это представление выглядит как список всех предприятий, полученных от API. Вот как выглядит пример:
"businesses": [
{
"rating": 4,
"price": "$",
"phone": "+14152520800",
"id": "E8RJkjfdcwgtyoPMjQ_Olg",
"alias": "four-barrel-coffee-san-francisco",
"is_closed": false,
"categories": [
{
"alias": "coffee",
"title": "Coffee & Tea"
}
],
"review_count": 1738,
"name": "Four Barrel Coffee",
"url": "https://www.yelp.com/biz/four-barrel-coffee-san-francisco",
"coordinates": {
"latitude": 37.7670169511878,
"longitude": -122.42184275
},
"image_url": "http://s3-media2.fl.yelpcdn.com/bphoto/MmgtASP3l_t4tPCL1iAsCg/o.jpg",
"location": {
"city": "San Francisco",
"country": "US",
"address2": "",
"address3": "",
"state": "CA",
"address1": "375 Valencia St",
"zip_code": "94103"
},
"distance": 1604.23,
"transactions": ["pickup", "delivery"]
},
// ...
],
Как упоминалось ранее, основной компонент передает данные дочернему компоненту, который отображает каждый отдельный объект в этом списке. Этот дочерний компонент также создает ссылку на другой компонент на основе идентификатора каждого бизнеса. Этот другой компонент на данный момент выглядит точно так же, как один отдельный дочерний компонент, только по другому URL-адресу. Например, основной компонент — «/venues», а отдельная страница для бизнеса — «/venue/E8RJkjfdcwgtyoPMjQ_Olg». Данные извлекаются из состояния Redux (это HOC) и отфильтровываются, чтобы найти этот идентификатор.
Проблема, с которой я сталкиваюсь, заключается в том, что когда я обновляю страницу, находясь на отдельной странице предприятия, состояние Redux очищается и, следовательно, не может правильно отображать данные. Чтобы обойти это, я попытался кэшировать сервис-воркеру все, что ему нужно, но это не сработало. Обновление заканчивается просто показом страницы загрузки, которую я создал, потому что она не делает вызов (что ожидается - не хочу, чтобы она это делала), а также не извлекает данные из кешей.
Есть ли лучший способ получить данные на всем пути к отдельному бизнес-компоненту после обновления? Или лучший способ кэшировать всю страницу/ответ API, чтобы он правильно отображался при обновлении?
Я полагаю, что мог бы обратиться к API для этого конкретного бизнеса, но я пытался этого избежать.
Ответы 2
Пробовали localStorage? есть промежуточное ПО Redux для него. Это выглядит примерно так:
import {createStore, compose} from 'redux';
import persist from 'redux-localstorage';
const store = createStore(reducer, compose(...otherMiddleware, persist(['apiResponses'])))
Это должно привести к тому, что раздел "apiResponses" вашего состояния избыточности будет сохраняться при перезагрузке браузера.
Я помню, что у Yelp API есть конечная точка, где вы можете получить подробную информацию об отдельном бизнесе. Тем не менее, у вас должен быть маршрут динамичный для вашей отдельной бизнес-страницы; например /businesses/:id. Затем вы можете получить доступ к этому параметр запроса в своем реквизит маршрута и перейти оттуда, чтобы получить данные для этого конкретного бизнеса.
Что-то вроде этого:
class IndividualBusiness extends Component {
// ...
componentDidMount() {
fetchBusinessById(this.props.match.id).then(setState(...))
// ...
}
// ...
}
Маршрут будет выглядеть примерно так:
<Route exact path = "/businesses/:id" render = {(routeProps) => <IndividualBusiness {...routeProps} />}/>
Но что делать, если данные уже находятся в хранилище избыточности? Просто добавьте поток управления в свой componentDidMount().
Попался, я узнал, что динамические маршруты — это обычно способ справиться с этой ситуацией, но я хотел убедиться, что нет другого способа, который был бы лучше. Я пытался избежать дополнительных вызовов API, но, думаю, это был бы единственный способ сделать это.
Я имею в виду, что вы можете хранить их в localStorage, у которого есть действительно простой API для работы. Но я никогда не видел, чтобы кто-то так делал. Они просто делают дополнительный звонок.
Попался, это достаточно справедливо. Мне на самом деле нравится, когда класс делает вызов сейчас, получая немного больше полезной информации от API!
@ Адам не уверен, что ты имел в виду под класс, выполняющий вызов выборки. Вы имеете в виду функцию fetchBusinessById()? Просто чтобы уточнить, что сорт является компонентом. Я пропустил расширяет компонент, но просто добавил его
Интересный вариант, присмотрюсь