处理来自API调用和呈现React组件的数据的最佳实践
在我的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，但我试图避免这种情况。
回答 1
Stack Overflow用户
发布于 2019-05-30 07:41:29
你试过localStorage吗？有一个redux middleware for it。它看起来像这样：
import {createStore, compose} from 'redux';
import persist from 'redux-localstorage';
const store = createStore(reducer, compose(...otherMiddleware, persist(['apiResponses'])))这应该会使redux状态的"apiResponses"部分在浏览器重新加载期间保持不变。
https://stackoverflow.com/questions/56369681
复制相似问题