react store 页面刷新 数据不能持久化

所谓单页应用，就是在不刷新浏览器的情况下可以在整个网页应用实时共享数据。 store是内存机制，不是缓存机制，页面刷新和关闭都会导致store初始化，store里面一般保存什么数据呢？ 1、组件的初始状态； 2、后端数据的初始状态； 如果你需要存储时数据是要实时存储并且读取显示出来，那么存在本地缓存或者服务端，这样每次刷新页面都需要读取本地缓存或者服务端的API，然后保存到store，再从store去读到组件上。

可以用localStorage， sessionStorage，cookie的方式解决。

如：往localStorage里存一份，当页面刷新的时候把localStorage的内容写到store中。

为什么要存储react-redux中的数据？
当页面刷新之后，redux中的数据会回到初始值，之前存储到redux中的数据也就不复存在了。废话不多说，直接上代码：

在reducer文件中：

let shopDetailInfo = sessionStorage.getItem('shopDetailInfo')?JSON.parse(sessionStorage.getItem('shopDetailInfo')):{};
let detailId = sessionStorage.getItem('detailId')?sessionStorage.getItem('detailId'):'';
let defaultState = {
    shopDetailInfo,
    detailId
};
export const homeData = (state = defaultState, action = {}) => {
    switch (action.type) {
        case home.SAVEPRODUCTDETAIL:
            sessionStorage.setItem('shopDetailInfo', JSON.stringify(action.data));
            return {...state, ...{shopDetailInfo: action.data}};
        case home.SAVEDETAILID:
            sessionStorage.setItem('detailId', action.data);
            return {...state, ...{detailId: action.data}};
        default:
            return state;
    }
}
以detailId为例：判断sessionStorage中是否有值，有值的话将sessionStorage中的数据直接付给defaultState，页面刷新之后，由于设置了state = defaultState，页面还是会显示存储数据的。
--------------------- 
原文：https://www.jianshu.com/p/db80e385b479
原文：https://blog.csdn.net/qq_39685062/article/details/82698954