Лучшая практика для обработки данных из вызова API и рендеринга компонентов React

Question

Я немного новичок в React и ищу лучшие практики для конкретной ситуации в моем React / Redux / Firebase PWA. В данный момент интересующая меня часть является оберткой для Yelp API.

У меня есть основной компонент, который запрашивает API Yelp при загрузке (внутри 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 для этого конкретного бизнеса, но я пытался этого избежать.

Answer 1

Я помню, у 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().

Answer 2

Вы пробовали localStorage? промежуточное программное обеспечение для него .Это выглядит примерно так:

import {createStore, compose} from 'redux';
import persist from 'redux-localstorage';

const store = createStore(reducer, compose(...otherMiddleware, persist(['apiResponses'])))

Это должно привести к тому, что секция "apiResponses" вашего избыточного состояния сохранится после перезагрузки браузера.