使用redux-persist解决redux数据刷新丢失问题

简介: 使用redux-persist解决redux数据刷新丢失问题
  • 在React项目实际开发中,我们常常会对一些数据进行存储缓存中,防止用户刷新浏览器,数据丢失问题,比如token,用户信息之类的。之前都是手写一遍localStorage和sessionStorage储存,接来下,我们通过一个插件redux-persist配置项,来存储数据。

存储数据配置

  • 首先安装 redux-persist插件
cnpm install redux-persist
  • store文件配置
  • 本地存储 import storage from 'redux-persist/lib/storage
  • 会话存储 import storageSession from 'redux-persist/lib/storage/session
  • 其中blacklist设置哪些数据不需要存储,因为在项目中,有些数据是没有必要存储的
import { createStore,combineReducers,applyMiddleware,compose } from 'redux'

import { persistStore, persistReducer } from 'redux-persist'
import storage from "redux-persist/lib/storage"; //本地存储

import language from './language/languageReducer'

// 创建reducer对象
const allReducer = {
    language
}
// 缓存数据配置
const persistConfig = {
    key: "root",
    storage,
    whitelist: ["language"], //需要缓存的数据
    blacklist:[], //不需要缓存的数据
}
// 合并
const rootReducer  = combineReducers(allReducer)
const persistedReducer = persistReducer(persistConfig, rootReducer)
// 调试redux
const store = createStore(persistedReducer,compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()))

export const persistor = persistStore(store)
export default store

使用PersistGate包装您的根组件

  • 引入插件和store配置文件
import store, {persistor} from './redux/store'

import { PersistGate } from "redux-persist/integration/react";
  • 配置
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App /> 
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
  • 以上就是在redux解决数据丢失问题
  • 如果想看react中英文切换,移步到 点击跳转: link.
目录
相关文章
|
监控 druid Java
Spring Boot 3 集成 Druid 连接池详解
在现代的Java应用中,使用一个高效可靠的数据源是至关重要的。Druid连接池作为一款强大的数据库连接池,提供了丰富的监控和管理功能,成为很多Java项目的首选。本文将详细介绍如何在Spring Boot 3项目中配置数据源,集成Druid连接池,以实现更高效的数据库连接管理。
9282 2
Spring Boot 3 集成 Druid 连接池详解
|
消息中间件 存储 负载均衡
Kafka面试题及答案
Kafka面试题及答案
|
9月前
|
安全 Serverless API
多模态数据信息提取解决方案评测
该方案展示了如何利用阿里云的多模态大模型服务进行文本、图片和文档的信息提取。通过函数计算(FC)调用百炼模型服务API,实现信息提取功能。具体步骤包括: 1. **开通百炼模型服务**:获取API Key,确保可以调用大模型。 2. **部署应用**:使用函数计算部署应用模板,配置参数并创建环境。 3. **访问示例应用**:通过提供的域名访问示例网站,测试信息提取功能。 4. **清理资源**:删除函数计算和OSS Bucket等资源,避免产生额外费用。 此方案具备多模态推理、易于扩展、灵活调用模式和便捷安全的云产品接入等优点,适用于多种业务需求。
355 28
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
12月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
1552 0
|
SQL 关系型数据库 MySQL
GORM V2 安装和连接 MySQL
GORM V2 安装和连接 MySQL
928 0
|
存储 安全 数据库
打破砂锅:Rails如何实现精细的RBAC权限控制?
【8月更文挑战第31天】 Ruby on Rails 中的权限控制系统是确保多用户 Web 应用安全的关键。基于角色的访问控制(RBAC)通过角色分配实现细粒度权限管理。本文介绍如何构建 RBAC 系统,包括创建角色和权限模型及其关联,并在控制器中执行权限检查。通过这种方式,可以有效地管理和保护应用资源。利用 Rails 的强大功能及社区资源(如 `cancancan` 或 `pundit`),可进一步提升权限控制的灵活性和安全性。
147 0
|
存储 Go 开发者
解释 Golang 中的 switch 语句
【8月更文挑战第31天】
334 0
|
JavaScript 前端开发 开发者
Web Components详解-Shadow DOM基础
Web Components详解-Shadow DOM基础
519 1