Redux-persist使用
redux-persist作用是将store中的数据缓存到浏览器中,减少数据请求,每当白名单中的数据发生变化,才会进行一次更新缓存的操作,并且这个数据缓存是存在localStorage中的,不是会话级别的缓存。
安装方式两种:npm install --save redux-persist / yarn add redux-persist
实现方式主要是依靠两个方法:persistStore和persistReducer,使用persistReducer时需要指定persistConfig,这一项就是你需要缓存的数据处理项,它有着黑白名单的处理方式,还需要一个storage的协助:
import {persistStore, persistReducer} from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // BLACKLIST
const persistConfig = {
key: 'root', // key是放入localStorage中的key
storage: storage, // storage简单就可以理解成localStorage的功能封装吧,不过有时候由于版本问题,必要在后一个storage上加一个default属性,可以在console中打出来判断是否需要加
blacklist: ['navigation'] // navigation不会被存入缓存中,其他会,适用于少部分数据需要实时更新
}; // WHITELIST
const persistConfig = {
key: 'root',
storage: storage,
whitelist: ['navigation'] // navigation会存入缓存,其他不会存,适用于大多数数据并不会实时从后台拿数据
};
然后在处理reducer时用到persistReducer,一种是直接使用,另一种你可能会使用到combineReducers,接下来就是创建store了,可能会用到中间件,不过此时不要理睬中间件创建store的过程,期间和你之前的创建方式一样,在store创建好的外边,加一句话,然后export里包含persistor就好:
const reducers = persistReducer(persistConfig, reducer); const reducers = combineReducers({
depReducer: persistReducer(persistConfig, depReducer)
});
const persistor = persistStore(store);
最后在ReactDOM.render()的时候引入另一个组件:
import {PersistGate} from 'redux-persist/lib/integration/react'; ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistor}>
<Dep />
</PersistGate>
</Provider>,
document.getElementById('app')
);
Redux-persist使用的更多相关文章
- 基于 Redux + Redux Persist 进行状态管理的 Flutter 应用示例
好久没在 SegmentFault 写东西,唉,也不知道 是忙还是懒,以后有时间 再慢慢写起来吧,最近开始学点新东西,有的写了,个人博客跟这里同步. 一直都在自己的 React Native 应用中使 ...
- React项目使用Redux
⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...
- 2019 年 React 学习路线图(转)
转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框 ...
- (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去
原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...
- 2019年React学习路线图
作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们 ...
- [Redux] Refactoring the Entry Point
We will learn how to better separate the code in the entry point to prepare it for adding the router ...
- [Redux] Persisting the State to the Local Storage
We will learn how to use store.subscribe() to efficiently persist some of the app’s state to localSt ...
- Hydux: 一个 Elm-like 的 全功能的 Redux 替代品
在学习和使用 Fable + Elmish 一段时间之后,对 Elm 架构有了更具体的了解, 和预料中的一样,Redux 这种来自 Elm 的风格果然还是和强类型的 Meta Language 语言更 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
随机推荐
- 团队-爬虫豆瓣top250项目-模块开发过程
项目托管平台地址:https://github.com/gengwenhao/GetTop250.git 开发模块功能: "get_info()单个页面的爬取"功能,开发时间:15 ...
- JS两个页面通过URL传值
1.传递参数: window.location.href = "./list.html?id="+id; 1.接收参数: (1)接收参数函数封装 function GetReque ...
- JavaScript 注意要点
何时加引号: 只有变量不加引号.加了引号的一定不是变量,是字符 方法: 方法一律带有小括号 js 中的作用域 全局变量: 在最外层定义的变量: 在函数体内部看是没有声明var的 也是全局 ...
- 剑指Offer 45. 扑克牌顺子 (其他)
题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
- Linux安装软件出现 “Unable to locate package xxx”错误
使用新购入的阿里云服务器ECS,预装的Ubuntu,然后想要利用 xrdp 进行远程登陆,但是在输入命令: apt-get install xrdp 出现了 E;Unable to locate pa ...
- python 前端 html
web 服务本质: 浏览器发出请求--HTTP协议--服务端接收信息----服务端返回响应---服务端把HTML文件发给浏览器--浏览器渲染页面. HTML: 超文本标记语言是一种用于创建网页的标记语 ...
- python rtree包查找三维空间下的最近设备
rtree模块有2个常用的类:rtree.index.Index和rtree.index.Property.其中rtree.index.Index用于进行数据操作,rtree.index.Proper ...
- 【leetcode】437. Path Sum III
problem 437. Path Sum III 参考 1. Leetcode_437. Path Sum III; 完
- BEAM188和LINK180简单实例
简介 一开始想做一个绳索单元悬挂重物的仿真,其实想法很简单,但是在实现过程中却出现了很大的问题,纠结了很久,初步归结为:绳索单元在垂直其单元方向上受力,会导致其产生很大的变形,从而导致其不收敛.因此专 ...
- django admin 支持时间更改
from django.db import models import django.utils.timezone as timezone class Doc(models.Model): add_d ...