当前位置: 首页 > news >正文

react中使用redux-persist做持久化储存

某天下午折腾着玩的 – 笔记

安装相关依赖

npm install @reduxjs/toolkit redux-persist redux react-redux
// store.jsx
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // 选择持久化存储引擎,如 localStorage 或 AsyncStorageimport rootReducer from "./reducers/index"; // 导入您的根 reducer// 配置持久化设置
const persistConfig = {key: "root", // 存储的键名storage, // 持久化存储引擎// 可选的配置项,如白名单、黑名单等 选其一就好了// blacklist:['test'], // 只有 test 不会被缓存// whitelist: ["test"], // 只有 test 会被缓存
};const persistedReducer = persistReducer(persistConfig, rootReducer);const store = configureStore({reducer: persistedReducer,middleware: getDefaultMiddleware({serializableCheck: false, // 禁用严格模式}),
});const persistor = persistStore(store);export { store, persistor };

将 store 提供给应用程序:将 Redux store 提供给根组件,以便在整个应用程序中可以访问到 Redux 状态

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./redux/store";
import App from "./App";ReactDOM.createRoot(document.getElementById("root")).render(<React.StrictMode><Provider store={store}><PersistGate loading={null} persistor={persistor}><App /></PersistGate></Provider></React.StrictMode>
);

reducer 示例:

// reducers/index.jsx
import { combineReducers } from "redux";
import userReducer from "./user";
import baseReducer from "./base";const rootReducer = combineReducers({user: userReducer,base: baseReducer,
});export default rootReducer;
// reducers/user.jsx
import { createSlice } from "@reduxjs/toolkit";const initialState = {token: "默认值token",isLogin: false,
};const user = createSlice({name: "user",initialState,reducers: {setToken: (state, action) => {// 将传入的值设置为 token 的新值state.token = action.payload;},},
});export const { setToken } = user.actions;
export default user.reducer;

在组件中使用

// App.jsx
import { useSelector, useDispatch } from "react-redux";
import { setToken } from "./redux/reducers/user";const App = () => {const user = useSelector((state) => state.user);// 在页面组件中使用 useDispatch 获取 dispatch 函数,用于派发 actionconst dispatch = useDispatch();const setTokenFun = () => {dispatch(setToken("一个新的token"));};return (<><p>token====={user.token}</p><Button type="primary" onClick={setAddressFun}>Set Token</Button></>);
};export default App;

相关文章:

react中使用redux-persist做持久化储存

某天下午折腾着玩的 – 笔记 安装相关依赖 npm install reduxjs/toolkit redux-persist redux react-redux// store.jsx import { configureStore, getDefaultMiddleware } from "reduxjs/toolkit"; import { persistStore, persistReducer } from "redux-per…...

【leetcode】203. 移除链表元素(easy)

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* Lis…...

InfiniBand、UCIe相关思考

InfiniBand、UCIe相关思考 内容1、InfiniBandInfiniBand是什么&#xff1f;InfiniBand的来历是什么&#xff1f;InfiniBand为什么重要&#xff1f;InfiniBand相较于Ethernet区别&#xff1f;同领域内还有其他哪些技术&#xff1f;InfiniBand中RDMA是种什么技术&#xff1f; 内容…...

[C++项目] Boost文档 站内搜索引擎(3): 建立文档及其关键字的正排 倒排索引、jieba库的安装与使用...

之前的两篇文章: 第一篇文章介绍了本项目的背景, 获取了Boost库文档 &#x1fae6;[C项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍…第二篇文章 分析实现了parser模块. 此模块的作用是 对所有文档html文件, 进行清理并汇总 &#x1fae6;[C项目] …...

el-date-picker回显问题解决记录

el-date-picker回显问题记录 组件结构 <el-date-pickerv-model"time"type"datetimerange"range-separator"至"start-placeholder"开始日期"end-placeholder"结束日期"value-format"yyyy-MM-dd HH:mm:ss":defau…...

Linux中的特殊进程(孤儿进程、僵尸进程、守护进程)

一、孤儿进程 1&#xff09;父进程退出&#xff0c;子进程不退出&#xff0c;此时子进程被1号&#xff08;init&#xff09;进程收养&#xff0c;变成孤儿进程。 2&#xff09;孤儿进程会脱离终端控制&#xff0c;且运行在后端&#xff0c;不能用ctrlc杀死后端进程&#xff0c;…...

【分布式能源选址与定容】光伏、储能双层优化配置接入配电网研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码、数据、讲解 &#x1f4a5;1 概述 由于能源的日益匮乏&#xff0c;电力需求的不断增长等&#xff0c;配电网中分布式能源渗透率不断提高&#xff0c;且逐渐向主动配电网方…...

《cuda c编程权威指南》04 - 使用块和线程索引映射矩阵索引

目录 1. 解决的问题 2. 分析 3. 方法 4. 代码示例 1. 解决的问题 利用块和线程索引&#xff0c;从全局内存中访问指定的数据。 2. 分析 通常情况下&#xff0c;矩阵是用行优先的方法在全局内存中线性存储的。如下。 8列6行矩阵&#xff08;nx,ny&#xff09;&#xff08;…...

mysql 、sql server 常见的区别

&#xff2e;&#xff35;&#xff2c;&#xff2c;   处理 MySQL IFNULL(col , val) SQL Server ISNULL(col,val) 表名、列名等 一般不推荐用保留字 &#xff0c;如果非要保留字 MySQL 用用着重号&#xff0c;即 反引号 包括 select col from GROUP SQL Server 用用着重号…...

查找特定元素——C++ 算法库(std::find_if)

std::find_if函数在C++中的实际使用案例非常广泛,以下是一些常见的用法示例: 1、在容器中查找满足特定条件的元素: #include <iostream> #include <vector> #include <algorithm>bool isOdd(int num) {...

D3JS教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 D3是Data-Driven Documents的缩写&#xff0c;D3.js是一个基于数据管理文档的资源JavaScript库。 D3 是最有效的数据可视化框架之一。它允许开发人员在 HTML、CSS 和 SVG 的帮助下在浏览器中创建动态的交互式数据可视化。数据可视化是将过滤后的数据以图片和图形的形…...

Android入门教程||Android 架构||Android 应用程序组件

Android 架构 Android 操作系统是一个软件组件的栈&#xff0c;在架构图中它大致可以分为五个部分和四个主要层。 Linux内核 在所有层的最底下是 Linux - 包括大约115个补丁的 Linux 3.6。它提供了基本的系统功能&#xff0c;比如进程管理&#xff0c;内存管理&#xff0c;设…...

C语言二进制数据和16进制字符串互转

知识点&#xff1a;结构体中的“伸缩型数组成员”(C99新增) C99新增了一个特性&#xff1a;伸缩型数组成员&#xff08;flexible array member&#xff09;&#xff0c;利用这项特性声明的结构&#xff0c;其最后一个数组成员具有一些特性。第1个特性是&#xff0c;该数组不会…...

技术复盘(5)--git

技术复盘--git 资料地址原理图安装配置基本命令分支命令对接gitee练习:远程仓库操作 资料地址 学习地址-B站黑马&#xff1a;https://www.bilibili.com/video/BV1MU4y1Y7h5 git官方&#xff1a;https://git-scm.com/ gitee官网&#xff1a;https://gitee.com/ 原理图 说明&am…...

GDAL C++ API 学习之路 (5) Spatial Reference System篇 OGRSpatialReference类

class OGRSpatialReference #include <ogr_spatialref.h> OGRSpatialReference 是 GDAL/OGR 库中的一个重要类&#xff0c;用于管理和操作地理空间数据的空间参考系统&#xff08;Spatial Reference System&#xff0c;SRS&#xff09;。它提供了一系列功能&…...

2023年华数杯数学建模C题思路代码分析 - 母亲身心健康对婴儿成长的影响

# 1 赛题 C 题 母亲身心健康对婴儿成长的影响 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c; 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况&#xff0c;如抑郁、焦虑、 压力等&#xff0c;可能会对婴儿的认知、情…...

WebAgent-基于大型语言模型的代理程序

大型语言模型&#xff08;LLM&#xff09;可以解决多种自然语言任务&#xff0c;例如算术、常识、逻辑推理、问答、文本生成、交互式决策任务。最近&#xff0c;LLM在自主网络导航方面也取得了巨大成功&#xff0c;代理程序助HTML理解和多步推理的能力&#xff0c;通过控制计算…...

智慧~经典开源项目数字孪生智慧商场——开源工程及源码

深圳南山某商场的工程和源码免费赠送&#xff0c;助您打造智慧商场。立即获取&#xff0c;提升商场管理效能&#xff01; 项目介绍 凤凰商场作为南山地区的繁华商业中心&#xff0c;提供多样化的购物和娱乐体验。通过此项目&#xff0c;凤凰商场将迈向更智能的商业模式。 本项目…...

LeetCode--剑指Offer75(1)

目录 题目描述&#xff1a;剑指 Offer 05. 替换空格&#xff08;简单&#xff09;题目接口解题思路1代码解题思路2代码 PS: 题目描述&#xff1a;剑指 Offer 05. 替换空格&#xff08;简单&#xff09; 请实现一个函数&#xff0c;把字符串 s 中的每个空格替换成"%20&quo…...

C++ 关于大端模式和小端模式的简析

大端及小端的简析 序言环境概念理解可能有问题的地方一般情况下需要注意的大小端情况关于大小端相关的实用函数/代码判断自身大小端的代码大小端转换函数 序言 我记得我已经查过4次了&#xff0c;最近回想一下发现我竟然又忘了&#xff01;所以特以此文来记录一下。 环境 Qt…...

BRV自定义扩展开发:从零构建专属列表组件的终极教程

BRV自定义扩展开发&#xff1a;从零构建专属列表组件的终极教程 【免费下载链接】BRV [永久维护] Android 快速构建 RecyclerView, 比 BRVAH 更简单强大 项目地址: https://gitcode.com/gh_mirrors/br/BRV 想要在Android开发中快速构建功能强大的RecyclerView列表吗&…...

别再只盯着IOU了!手把手拆解DeepSort级联匹配,看它如何用‘优先级’解决ID跳变

别再只盯着IOU了&#xff01;手把手拆解DeepSort级联匹配&#xff0c;看它如何用‘优先级’解决ID跳变 当你在监控视频中看到行人ID突然从"007"跳变成"1024"时&#xff0c;是否曾怀疑自己的多目标跟踪系统被黑客入侵&#xff1f;这种被称为ID跳变&#xff…...

别再复制粘贴了!深入理解STM32中IIR滤波器的差分方程与状态变量

从零构建STM32 IIR滤波器&#xff1a;差分方程、状态变量与C语言实现全解析 在嵌入式信号处理领域&#xff0c;IIR&#xff08;无限脉冲响应&#xff09;滤波器因其高效的计算特性和优异的频率选择性能&#xff0c;成为STM32等资源受限平台的理想选择。但许多开发者仅仅停留在&…...

Phi-4-mini-reasoning惊艳效果:对存在矛盾前提的题目主动识别并预警

Phi-4-mini-reasoning惊艳效果&#xff1a;对存在矛盾前提的题目主动识别并预警 1. 模型核心能力展示 Phi-4-mini-reasoning作为一款专注于推理任务的文本生成模型&#xff0c;在处理数学题、逻辑题等需要多步分析的场景时展现出独特优势。最令人惊艳的是&#xff0c;它能够主…...

Chandra效果实测:100轮连续中文对话稳定性与上下文保持能力验证

Chandra效果实测&#xff1a;100轮连续中文对话稳定性与上下文保持能力验证 测试背景说明&#xff1a;本次测试基于CSDN星图平台的Chandra镜像&#xff0c;在标准配置环境下进行100轮连续中文对话&#xff0c;全面评估其长时间运行的稳定性、上下文理解能力和响应表现。 1. 测试…...

LeetCode:726. Number of Atoms - Python

问题描述&#xff1a; 给定一个化学式formula&#xff08;作为字符串&#xff09;&#xff0c;返回每种原子的数量。 原子总是以一个大写字母开始&#xff0c;接着跟随0个或任意个小写字母&#xff0c;表示原子的名字。 如果数量大于 1&#xff0c;原子后会跟着数字表示原子的…...

别再直接求逆了!用MATLAB的Cholesky分解高效求解对称正定矩阵的逆(附完整代码)

高效求解对称正定矩阵逆&#xff1a;MATLAB中Cholesky分解的工程实践指南 在工程计算领域&#xff0c;对称正定矩阵的逆矩阵求解是一个基础但至关重要的操作。从金融风险模型的协方差矩阵求逆&#xff0c;到机器学习中高斯过程回归的核矩阵运算&#xff0c;再到信号处理中的自适…...

终极指南:gradle-retrolambda在大型项目中的性能优化与稳定性保障策略

终极指南&#xff1a;gradle-retrolambda在大型项目中的性能优化与稳定性保障策略 【免费下载链接】gradle-retrolambda evant/gradle-retrolambda: gradle-retrolambda 插件允许开发者在 Android 项目中使用 Java 8 的 Lambda 表达式和其他现代语言特性&#xff0c;并通过 Ret…...

Pixel Language Portal保姆级教程:Hunyuan-MT-7B模型支持动态温度调节(per-language temperature)

Pixel Language Portal保姆级教程&#xff1a;Hunyuan-MT-7B模型支持动态温度调节&#xff08;per-language temperature&#xff09; 1. 认识你的像素翻译伙伴 Pixel Language Portal&#xff08;像素语言跨维传送门&#xff09;是一款基于腾讯Hunyuan-MT-7B大模型构建的创新…...

使用PHP Imagick扩展将PDF转换为图片功能的完整方案

引言在开发中&#xff0c;经常需要将 PDF 文档转换为图片格式&#xff0c;以便于在线预览、生成缩略图或进行其他图像处理操作。PHP 的 Imagick 扩展提供了强大的图像处理能力&#xff0c;可以轻松实现这一需求。本文将介绍如何使用 Imagick 扩展创建一个高效的 PDF 转图片工具…...