React+Redux 数据存储持久化
React+Redux 数据存储持久化
1、安装相关依赖
yarn add @reduxjs/toolkit redux redux-persist
2、userSlice:用户状态数据切片封装
import { createSlice, PayloadAction } from '@reduxjs/toolkit'interface IUserInfo {userName: stringavatar?: stringbrief?: string
}// 使用该类型定义初始 state
const initialState = {userInfo: <IUserInfo>{userName: 'zh',brief: '无心'}
}const userSlice = createSlice({name: 'user',initialState,reducers: {// action: {// payload: { uerName: 'zhw' },// type: 'user/updateUserName' name + 方法名// }// 使用: dispatch(updateUserName({ uerName: 'zhw' }))// // 使用 PayloadAction 类型声明 `action.payload` 的内容updateUserInfo: (state, action: PayloadAction<IUserInfo>) => {// Redux Toolkit 允许在 reducers 中编写 "mutating" 逻辑。// 它实际上并没有改变 state,因为使用的是 Immer 库,检测到“草稿 state”的变化并产生一个全新的// 基于这些更改的不可变的 state。state.userInfo = action.payload}}
})
export const { updateUserInfo } = userSlice.actions
export default userSlice.reducer
3、在store的index.ts中
默认已经模块化了reducers,如下图所示

// configureStore: store配置项
import { configureStore } from '@reduxjs/toolkit'
// combineReducers: 组合reducers目录下的所有reducer模块
import { combineReducers } from 'redux'
// 数据持久化
import { persistStore, persistReducer } from 'redux-persist'
// defaults to localStorage for web
import storageLocation from 'redux-persist/lib/storage'
// import storageSession from 'redux-persist/lib/storage/session'// 导入自己封装好的reducers
import userReducer from './reducers/userSlice'
// 持久化存储配置对象
const persistConfig = {key: 'root',storage: storageLocation
}
// 持久化处理后的reducers
const persistedReducer = persistReducer(persistConfig,combineReducers({// 数据切片userReducer})
)
// 将初九话插件和store通过middleware关联起来
const store = configureStore({// userReducer 模块名reducer: persistedReducer,middleware: (getDefaultMiddleware) =>getDefaultMiddleware({serializableCheck: false})
})// 可以订阅 store
// store.subscribe(() => console.log(store.getState(), 'userSlice'))// 持久化的store
const persistor = persistStore(store)export { store, persistor }
4、将store和App组件关联起来
import React from 'react'
import ReactDOM from 'react-dom/client'
// UI css
// antd v5 自带的重置样式
import 'antd/dist/reset.css'
// 自定义css
import '@/assets/style/global.scss'// 导入路由模式
import { BrowserRouter } from 'react-router-dom'
// 导入redux仓库
import { Provider } from 'react-redux'
import { store, persistor } from '@/store'
// store持久化
import { PersistGate } from 'redux-persist/integration/react'import App from './App.tsx'ReactDOM.createRoot(document.getElementById('root')!).render(<Provider store={store}><PersistGate loading={null} persistor={persistor}><React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode></PersistGate></Provider
5、在组件中使用store
import { useSelector, useDispatch } from 'react-redux'
import { updateUserInfo } from '@/store/reducers/userSlice'
const Home = () => {const {userInfo: { userName, brief }} = useSelector((state: RootState) => state.userReducer)const dispatch = useDispatch()const test = () => {dispatch(updateUserInfo({ userName: 'zhw', brief: '那就这样吧' }))}return (<><div>home page</div><p>{userName}</p><p>{brief}</p><button onClick={test}>测试</button></>)
}
export default Home
数据持续化存储github redux-persist
redux官网 redux
相关文章:
React+Redux 数据存储持久化
ReactRedux 数据存储持久化 1、安装相关依赖 yarn add reduxjs/toolkit redux redux-persist 2、userSlice:用户状态数据切片封装 import { createSlice, PayloadAction } from reduxjs/toolkitinterface IUserInfo {userName: stringavatar?: stringbrief?: st…...
Redis高可用部署架构
目录 1. 主从复制与哨兵架构:2. Redis集群架构: Redis高可用部署可以采用主从复制与哨兵架构或Redis集群架构。下面将分别介绍这两种架构的架构图、优缺点和具体应用场景。 1. 主从复制与哨兵架构: 架构图: ----------| Client…...
深度学习与神经网络
人工智能,机器学习,深度学习,神经网络,emmmm,傻傻分不清楚,这都啥呀,你知道吗?我不知道。你知道吗?我不知道。 来来来,接下来,整硬菜:…...
CPU密集型和IO密集型任务的权衡:如何找到最佳平衡点
关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、CPU密集型与IO密集型3.1、CPU密集型3.2、I/O密…...
超越POSIX:一个时代的终结?
在本文中,我们通过对Portable Operating System Interface(POSIX)抽象的历史演变进行系统性的回顾,提供了一个全面的视图。我们讨论了推动这些演变的一些关键因素,并确定了在构建现代应用程序时使它们不可行的缺陷。 …...
秋招算法备战第22天 | 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树
235. 二叉搜索树的最近公共祖先 - 力扣(LeetCode) 在一个二叉搜索树中,两个节点 p 和 q 的最近公共祖先可以通过以下的算法找到: 从根节点开始。如果当前节点的值大于 p 和 q 的值,那么你需要转向左子树。因为在二叉…...
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】
浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 不会导入/打开小程序的看这里 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择 学习目标图标的注意事项图标资源打开小程序动手实践找到图标最…...
题目1 SQL注入(保姆级教程)
url:http://192.168.154.253:81/ #打开http://XXX:81/,XXX为靶机的ip地址 审题 1、打开题目看到有一个提示,此题目需要通过SQL注入漏洞读取/tmp/360/key文件,key在这个文件中 2、开始答题 发现这里url中有一个id的参数࿰…...
PDF转换成word乱码了怎么办?最实用的方法在这里!
在日常办公中,我们常常需要将PDF文件转换成Word文件,以便于编辑和修改。然而有时候在PDF转Word的过程中可能会遇到乱码的问题,让人感到困扰。在面对这种情况时,我们需要选择正确的方法,避免文件转换后出现乱码。下面我…...
字节跳动后端面试,笔试部分
var code "7022f444-ded0-477c-9afe-26812ca8e7cb" 背景 笔者在刷B站的时候,看到了一个关于面试的实录,前半段是八股文,后半段是笔试部分,感觉笔试部分的题目还是挺有意思的,特此记录一下。 笔试部分 问…...
[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测
系列文章目录 第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 文章目录 系列文章目录前言一、列计划1.1、目标1.2、步骤 二、使用步骤2.1、准备素材(图片):草坪、人物(熊猫)、障碍(石头)2.2、初…...
区间预测 | MATLAB实现基于QRF随机森林分位数回归时间序列区间预测模型
区间预测 | MATLAB实现基于QRF随机森林分位数回归时间序列区间预测模型 目录 区间预测 | MATLAB实现基于QRF随机森林分位数回归时间序列区间预测模型效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRF随机森林分位数回归时间序列区间预测模型࿱…...
.NET网络编程——TCP通信
一、网络编程的基本概念 : 1. 网络 就是将不同区域的电脑连接到一起,组成局域网、城域网或广域网。把分部在不同地理区域的计算机于专门的外部设备用通信线路 互联成一个规模大、功能强的网络系统,从而使众多的计算机可以方便地互相传递信息,…...
【Python机器学习】实验01 Numpy以及可视化回顾
文章目录 一、Numpy的基础知识实验1 生成由随机数组成的三通道图片,分别显示每个维度图片,并将三个通道的像素四周进行填充,分别从上下左右各填充若干数据。 二、Numpy的线性代数运算实验2 请准备一张图片,按照上面的过程进行矩阵…...
vue3-组件中的变化
1. 路由 1. 安装指令:npm i vue-routernext 2. 创建路由:createRouter2. 异步组件(defineAsyncComponent) defineAsyncComponent 是用于定义异步组件的函数。defineAsyncComponent 接受一个工厂函数作为参数,这个工厂…...
认识主被动无人机遥感数据、预处理无人机遥感数据、定量估算农林植被关键性状、期刊论文插图精细制作与Appdesigner应用开发
目录 第一章、认识主被动无人机遥感数据 第二章、预处理无人机遥感数据 第三章、定量估算农林植被关键性状 第四章、期刊论文插图精细制作与Appdesigner应用开发 更多推荐 遥感技术作为一种空间大数据手段,能够从多时、多维、多地等角度,获取大量的…...
数学建模的六个步骤
一、模型准备 了解问题的实际背景,明确其实际意义,掌握对象的各种信息,以数学思路来解释问题的精髓,数学思路贯彻问题的全过程,进而用数学语言来描述问题。要求符合数学理论,符合数学习惯,清晰…...
【计算机组成原理】24王道考研笔记——第二章 数据的表示和运算
第二章 数据的表示和运算 一、数值与编码 1.1 进制转换 任意进制->十进制: 二进制<->八进制、十六进制: 各种进制的常见书写方式: 十进制->任意进制:(用拼凑法最快) 真值:符合人…...
JQ-6 Bootstrap入门到实战;Bootstrap的(优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件);小项目实践
目录 1_认识Bootstrap1.1_概念1.2_起源和历史1.3_Bootstrap优缺点 2_Bootstrap4的安装2.1_方式一 CDN2.2_方式二 : 下载源码引入2.3_方式三 : npm安装 3_Bootstrap初体验4_响应式容器原理4.1_屏幕尺寸的分割点(Breakpoints)4.2_响应式容器Containers 5_网…...
如何用3D格式转换工具HOOPS Exchange读取颜色和材料信息?
作为应用程序开发人员,非常希望导入部件的图形表示与它们在创作软件中的外观尽可能接近。外观可以在每个B-Rep面的基础上指定,而且,通过装配层次结构的特定路径可以在视觉外观上赋予父/子覆盖。HOOPS ExchangeHOOPS Exchange可捕获有关来自各…...
Win11系统下Anaconda3-2022.10保姆级安装与避坑指南(附不勾选PATH的详细原因)
Win11系统下Anaconda3-2022.10深度安装指南与关键配置解析 在数据科学和机器学习领域,Anaconda已经成为Python环境管理的标准工具之一。对于Windows 11用户来说,正确安装和配置Anaconda是开启数据分析之旅的第一步。本文将深入探讨Anaconda3-2022.10版本…...
树莓派物联网实战:避开TCP连接OneNet的3个常见坑(鉴权、脚本、心跳)
树莓派物联网实战:避开TCP连接OneNet的3个常见坑(鉴权、脚本、心跳) 在物联网项目开发中,树莓派作为边缘计算设备与云平台对接是常见需求。OneNet作为国内主流物联网平台,其TCP透传协议因其简单高效备受开发者青睐。然…...
告别网盘限速:LinkSwift一键获取九大网盘真实下载地址
告别网盘限速:LinkSwift一键获取九大网盘真实下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼…...
手把手带你用C语言模拟RISC-V的`li`指令扩展过程(附完整代码)
手把手带你用C语言模拟RISC-V的li指令扩展过程(附完整代码) 在计算机体系结构的学习中,理解指令集的工作原理是掌握底层编程的关键。RISC-V作为一种开源指令集架构,近年来在学术界和工业界都获得了广泛关注。本文将带领读者通过C语…...
# 软考软件设计师每日精练 | 2026-04-25
📝 软考软件设计师每日精练 | 2026-04-25📅 距离2026年5月23日软考还有 28天! 今日重点:算法策略辨析 线性规划 知识产权深化 项目管理工具🎯 模块一:算法策略辨析(必考 ★★★★★ÿ…...
NoFences完整指南:免费开源工具彻底解决Windows桌面杂乱问题
NoFences完整指南:免费开源工具彻底解决Windows桌面杂乱问题 【免费下载链接】NoFences 🚧 Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 还在为杂乱的Windows桌面图标而烦恼吗?No…...
2025届学术党必备的五大AI学术助手实测分析
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek AI论文工具在当代学术领域,已然成为了极为关键的辅助支撑力量,它可全…...
利用Taotoken快速为不同编程语言生成AI调用示例
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 利用Taotoken快速为不同编程语言生成AI调用示例 在构建现代应用时,全栈开发者常常需要在前端、后端、CLI工具等多个技术…...
终于蹲到了!“能读一半就是赚到”的《编码》精装版来了
前言:介绍一本好书 《编码》的第1版出版于1999年9月,从非常简单的概念开始讲解计算机工作的基础原理,帮助零基础的读者理解计算机的底层逻辑,建立计算机世界观。出版后立即收获全球范围内的广泛好评,成为影响几代程序员…...
Lindy AI Agent工作流编排进阶:从单Step到多Agent协同的6种拓扑模式(附拓扑决策树)
更多请点击: https://intelliparadigm.com 第一章:Lindy AI Agent工作流编排进阶:从单Step到多Agent协同的6种拓扑模式(附拓扑决策树) 在 Lindy 框架中,AI Agent 的工作流编排已超越传统线性 Step 链式调用…...
