React-redux-dom刷新页面数据丢失问题

最新推荐文章于 2023-08-31 14:01:00 发布

前端小二哥

最新推荐文章于 2023-08-31 14:01:00 发布

阅读量596

点赞数 9

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_44588612/article/details/125549280

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章の目录

前言
数据丢失问题导致的401错误
问题分析及解决
写在最后

前言

对于React-redux-dom的使用，大家一定是赞赏有加，它的集中式状态管理，使得共享的数据形成一个状态树，任何一个组件需要数据时都可以随时从状态树上访问数据，但是react-redux-dom存在的一个特点是当我们刷新页面重新渲染界面时，reducer返回的初始化状态会将现有的状态树覆盖，导致数据丢失的问题；下面我将结合实例为大家提供解决这个问题的思路；

数据丢失问题导致的401错误

控制报错
在这里插入图片描述
redux开发者工具中显示一刷新数据就丢失，如下图所示

问题分析及解决

上述刷新后redux开发者工具中显示数据丢失，显然是我在前言中所描述的，当刷新页面时，reducer会初始化状态，导致数据丢失，若想解决此问题我们显然需要和本地存储一起做个持久化，即redux管理的数据存储到locationStorage中，当刷新页面时，reducer初始化的数据先从本地存储中找，若找到了就返回，到redux中，找不到再返回空字符串或者对象；代码示例如下：

import { getToken } from '@/utils/token'
/**
 * 处理用户登录和退出的action
 * @param {string} preState 
 * @param {object} action 
 * @returns 
 */
const initState = getToken() || ''
const userlogin = (preState = initState, action) => {
    switch (action.type) {
        case 'login/setToken':
            return action.payload
        case 'user/logout':
            return ''
        default:
            return preState
    }
}
export default userlogin

以上的getToken || “” ,就是先从本地存储中拿初始化数据(getToken是封装好的从本地存储中拿数据的函数)，若没有getToken()，直接给初始化的状态一个空字符串就会导致每次刷新，redux中的数据丢失；
对redux不是很熟的同学可以先到redux官方文档学习redux，其链接如下：
redux中文文档