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

Question

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

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

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

没关系，店里还有东西。直到我重新加载页面。那就是当商店被擦除时，一个新的实例被创建（这是我的猜测）。商店现在是空的，现在不可能获得该特定对象（在我当前的实现中）。

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

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

在情况 2 中，when/where 这应该发生吗？

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

部分if执行：

//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 对象一样，不会在刷新后继续存在。在刷新期间，您正在重置浏览器的内存 window。

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

仅将半持久性信息保存到本地存储，例如身份验证令牌、用户第一个 name/last 名称、ui 设置等
在应用程序启动（或组件加载）期间，加载任何辅助信息，例如销售数据、消息提要和报价。此信息通常变化 quickly，将其缓存在本地存储中意义不大。

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

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

此外，关于 "up-to-date" 数据：这完全取决于您的应用程序需求。帮助您开始探索问题领域的一些想法：

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

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

My flux store gets re-instantiated on reload

flux

reactjs

reactjs-flux