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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无涯教程-Lua - 调试语句

Lua提供了一个调试库&#xff0c;该库提供了所有原始函数供无涯教程创建自己的调试器。即使没有内置的Lua调试器&#xff0c;也有许多针对Lua的调试器&#xff0c;这些调试器由各种开发人员创建&#xff0c;其中许多开源。 下表列出了Lua调试库中可用的函数及其用法。 Sr.No.…

Apache RocketMQ 命令注入

漏洞简介 RocketMQ 5.1.0及以下版本&#xff0c;在一定条件下&#xff0c;存在远程命令执行风险。RocketMQ的NameServer、Broker、Controller等多个组件外网泄露&#xff0c;缺乏权限验证&#xff0c;攻击者可以利用该漏洞利用更新配置功能以RocketMQ运行的系统用户身份执行命令…

论文阅读- Uncovering Coordinated Networks on Social Media:Methods and Case Studies

链接&#xff1a;https://arxiv.org/pdf/2001.05658.pdf 目录 摘要&#xff1a; 引言 Methods Case Study 1: Account Handle Sharing Coordination Detection 分析 Case Study 2: Image Coordination Coordination Detection Analysis Case Study 3: Hashtag Sequen…

k8s手动发布镜像的方法

kubectl edit deploy编辑对应的文件&#xff0c;并:wq!保存即可

2023年第四届“华数杯”数学建模思路 - 案例:FPTree-频繁模式树算法

## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c;他与Apriori算法一样也是用来挖掘频繁项集的&#xff0c…

互联网摸鱼日报(2023-08-03)

互联网摸鱼日报(2023-08-03) 36氪新闻 飞行汽车风口来了&#xff0c;什么时候我能坐上&#xff1f; 小红书的本地生活&#xff0c;还在玩票期 并行科技8月8日北交所上会&#xff0c;主营业务为超算云服务和算力运营服务 群玉山咨询马晓波&#xff1a;新消费品牌如何通过赛道…

21.Netty源码之编码器

highlight: arduino-light Netty如何实现自定义通信协议 在学习完如何设计协议之后&#xff0c;我们又该如何在 Netty 中实现自定义的通信协议呢&#xff1f;其实 Netty 作为一个非常优秀的网络通信框架&#xff0c;已经为我们提供了非常丰富的编解码抽象基类&#xff0c;帮助我…

sklearn 转换器和预估器

刚学习sklearn时&#xff0c;没分清转换器的fit&#xff08;&#xff09;和模型训练的fit&#xff08;&#xff09;&#xff0c;还以为是一个&#xff0c;结果学完了回过头来&#xff0c;才发现这些差异。再此记录一下。 一、 sklearn 转换器和预估器 转换器&#xff08;Trans…

Java--学生管理系统

本案例基于Java语言中的ArrayList集合来储存数据&#xff0c;并建立两个类——学生类和用户类存储在集合中&#xff0c;通过用户交互&#xff0c;搭建简单的学生管理系统。 1、学生类 学生类利用set函数进行获取学生单个信息&#xff0c;show函数负责获取全部信息。 package …

LCD驱动芯片VK1024B兼容HT系列驱动芯片,体积更小

产品型号&#xff1a;VK1024B 产品&#xff1a;VINKA/永嘉微电 封装形式&#xff1a;SOP16 产品年份&#xff1a;新年份 工程服务&#xff0c;技术支持&#xff0c;用芯服务 VK1024概述&#xff1a; VK1024B 是 24 点、 内存映象和多功能的 LCD 驱动&#xff0c; VK1024B …

Nginx实现反向代理和负载均衡

Nginx安装 本文章主要介绍下&#xff0c;如何使用Nginx来实现反向代理和负载均衡&#xff0c;Nginx安装和基础知识&#xff0c;可参考我的这篇文章 Nginx安装。 Nginx实现反向代理 实现反向代理需要准备两台Nginx服务器。一台Nginx服务器A&#xff0c;ip为 192.168.206.140&…

MySQL主从复制入门指南:基础概念和配置步骤

文章目录 前言一、问题分析二、Mysql主从复制1. 介绍2. 配置3. 测试 三、读写分离案例1. 背景2. shardingDBC介绍3. 入门案例4. 功能测试 总结 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮…

基于freertos的温湿度蓝牙系统

前言&#xff1a;本项目主要是基于freertos的小项目&#xff0c;目的是为了巩固近期学习的知识&#xff0c;功能较简单&#xff0c;可自行扩充。 一、项目基本架构 项目基本功能&#xff1a;通过STM32单片机的freertos操作系统&#xff0c;将温湿度数据显示在oled屏幕上&#…

节流函数(执行最后一次)

节流函数的主要目的是限制一个函数在一定时间内只能执行一次。以下是一个使用JavaScript编写的基本节流函数&#xff1a; function throttle(func, delay) {let lastCall 0;return function() {const now new Date().getTime();if (now - lastCall < delay) {return;}las…

vue响应数据为二维码如何渲染到页面

在postman测试请求后发现响应数据为一个二维码图片,不是链接,如何解决? 然后如果在vue中使用请求还会报Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1的错误。这个就是使用了JSON.parse导致的响应格式不对)&#xff0c;使用JSON.stringify解决…

Spring Boot集成单元测试调用dao,service

文章目录 Spring Boot集成单元测试调用dao&#xff0c;service1 添加相关依赖2 新建测试类 Spring Boot集成单元测试调用dao&#xff0c;service 1 添加相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-st…

入门NLTK:Python自然语言处理库初级教程

NLTK&#xff08;Natural Language Toolkit&#xff09;是一个Python库&#xff0c;用于实现自然语言处理&#xff08;NLP&#xff09;的许多任务。NLTK包括一些有用的工具和资源&#xff0c;如文本语料库、词性标注器、语法分析器等。在这篇初级教程中&#xff0c;我们将了解N…

奥威BI—数字化转型首选,以数据驱动企业发展

奥威BI系统BI方案可以迅速构建企业级大数据分析平台&#xff0c;可以将大量数据转化为直观、易于理解的图表和图形&#xff0c;推动和促进数字化转型的进程&#xff0c;帮助企业更好地了解自身的运营状况&#xff0c;及时发现问题并采取相应的措施&#xff0c;提高运营效率和质…

程序员的帝路应该是肉身成圣

标题听着贼中二&#xff0c;没办法哥们实在想不到啥好的标题&#xff0c;只是看到这个讨论程序员身体健康的话题啊情不自禁想到中学时期看过的一本修仙小说《遮天》小说内容忘记的差不多了&#xff0c;印象最深的就是各种体质&#xff0c;荒古圣体、先天霸体、混沌体等等&#…

【无公网IP】在公网环境下Windows远程桌面Ubuntu 18.04

【无公网IP】在公网环境下Windows远程桌面Ubuntu 18.04 文章目录 *【无*公网IP】在公网环境下Windows远程桌面Ubuntu 18.04一、 同个局域网内远程桌面Ubuntu1. 更新软件仓库2. 安装支持包3. 安装XFCE4桌面环境4. 安装XRDP5. 环境设置5.1 XFCE桌面配置5.2 在配置文件中&#xff…