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

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

0
Adam 30 Май 2019 в 02:15

2 ответа

Лучший ответ

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

0
Amiratak88 31 Май 2019 в 17:57

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

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

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

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

0
StickyCube 29 Май 2019 в 23:41