在我的React/Redux/Firebase PWA中,我对React和寻找针对特定情况的最佳实践有些陌生。现在,我关心的部分基本上是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"]
},
// ...
],
如前所述,主组件将数据向下传递给子组件,子组件将呈现该列表中的每个对象。该子组件还根据每个企业的id创建到另一个组件的链接。现在,另一个组件的外观与一个单独的子组件完全相同,只是位于不同的URL上。例如,主要组件是"/venues“,企业的单个页面将是”/venue/E8RJjfdcwgtyoPMjQ_Olg“。数据从Redux状态(它是临时的)中拉出,并过滤掉以找到该id。
我遇到的问题是,当我在企业的单个页面上刷新页面时,Redux状态被清除,因此无法正确呈现数据。为了尝试和解决这个问题,我尝试让服务工作者缓存它需要的所有内容,但这不起作用。刷新最终只显示我创建的加载页面,因为它不进行调用(这是预期的-不希望它这样做),并且它也不从缓存中提取数据。
有没有一种更好的方法,可以在刷新后将数据一直获取到各个业务组件?或者是缓存整个页面/API响应的更好方法,以便在刷新时正确呈现?
我想我可以让它接触到特定业务的API,但我试图避免这种情况。
https://stackoverflow.com/questions/56369681
复制相似问题