我的通量存储在重新加载时重新实例化

Question

好的。我有点新反应，我有一个＃1市长问题。真的找不到任何解决方案。

我已经构建了一个呈现对象列表的应用程序。该列表目前来自我的模拟 API。对象列表存储在存储中。获取对象的存储操作由组件完成。

我的问题是在显示这些对象时。当用户单击显示时，它会呈现一个包含对象详细信息的页面。存储方面，这意味着触发一个 getSpecific 函数，该函数根据 ID 从存储中检索对象。

这一切都很好，商店仍然有物品。直到我重新加载页面。那就是当商店被擦除时，会创建一个新实例（这是我的猜测）。商店现在是空的，现在不可能获得那个特定的对象（在我当前的实现中）。

所以，我在某处读到这是设计使然。解决方案是：

1. 将存储保存在本地存储中，以保留数据？
2. 再次调用 API 并再次获取所有对象？

在情况 2 中，这应该在何时/何地发生？

商店应该如何确保它始终拥有预期的数据？ 有什么提示吗？

一些如果实现：

//List.js

componentDidMount() {
    //The fetch offers function will trigger a change event
    //which will trigger the listener in componentWillMount
    OfferActions.fetchOffers();
}

componentWillMount() {
    //Listen for changes in the store
    offerStore.addChangeListener(this.retriveOffers);
}

retrieveOffers() {
    this.setState({
        offers: offerStore.getAll()
    });
}

.

//OfferActions.js

fetchOffers(){
    let url = 'http://localhost:3001/offers';
    axios.get(url).then(function (data) {
        dispatch({
            actionType: OfferConstants.RECIVE_OFFERS,
            payload: data.data
        });
    });

}

.

//OfferStore.js

var _offers = [];

receiveOffers(payload) {
    _offers = payload || [];
    this.emitChange();
}

handleActions(action) {
    switch (action.actionType) {
        case OfferConstants.RECIVE_OFFERS:
        {
            this.receiveOffers(action.payload);
        }
    }
}

getAll() {
    return _offers;
}

getOffer(requested_id) {

    var result = this.getAll().filter(function (offer) {
        return offer.id == requested_id;
    });

}

.

//Show.js

componentWillMount() {
    this.state = {
        offer: offerStore.getOffer(this.props.params.id)
    };
}

Answer 1

没错，redux 存储与任何其他 javascript 对象一样，不会在刷新后存活。在刷新期间，您正在重置浏览器窗口的内存。

您的两种方法都可以，但我建议如下：

1. 仅将半持久性信息（例如身份验证令牌、用户名/姓、ui 设置等）保存到本地存储。
2. 在应用程序启动（或组件加载）期间，加载任何辅助信息，例如销售数据、消息源和优惠。这些信息通常变化很快，将其缓存在本地存储中几乎没有意义。

对于 1. 您可以使用 redux-persist 中间件。它可以让您在应用程序启动期间保存到浏览器的本地存储并从中检索。 （这只是实现此目的的众多方法之一）。

对于 2. 你的方法是有道理的。在componentWillMount 上异步加载所需的数据。

此外，关于数据的“最新”：这完全取决于您的应用程序需求。一些有助于您开始探索问题领域的想法：

• 对于获取报价的每个请求，还要发送或保存时间戳。让应用程序决定时间戳何时“太旧”并再次请求。
• 实现实时通信，例如socket.io 将数据推送到客户端而不是客户端请求。
• 以适合您的应用程序的时间间隔请求数据。您可以传递上次请求信息的时间，服务器可以决定是否有可用的新数据或返回空响应，在这种情况下您会显示现有数据。