首页 > 其他分享 >react-redux 持久化

react-redux 持久化

时间:2024-04-09 17:33:24浏览次数:19  
标签:持久 storage react persist import redux store

1. 安装 redux-persist

npm install redux-persist

 

2.store/index.js文件

import { configureStore,combineReducers } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import counterReducer from './modules/counterStore'
import userReducer from './modules/userStore'

// 配置持久化
const persistConfig = {
  key: 'root',
  storage,
};

var all = combineReducers({
  counter: counterReducer,
  user: userReducer
})

// 获取持久化配置项
function getPersistConfig(key){
  return {
    key,
    storage,
  }
}
const store = configureStore({
  reducer:persistReducer(persistConfig,all),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false
 })
})

// 导出 persistor 对象以帮助持久化
export const persistor = persistStore(store);

export default store

  3.入口index.js文件注入

import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import store , { persistor }from './store'


root.render(
  <React.StrictMode>
     <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
      <RouterProvider router={router}></RouterProvider>
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

  

 

标签:持久,storage,react,persist,import,redux,store
From: https://www.cnblogs.com/jlyuan/p/18124423

相关文章

  • react 配置@别名
    1.安装craco工具npmi-D@craco/cracocraco是一个用于扩展CreateReactApp(CRA)的工具,CRA是一个用于快速搭建React应用的脚手架工具。CRA提供了一个简单的项目结构和配置,使得开发者可以快速开始一个React项目的开发。然而CRA的配置是被隐藏的,开发者无法对其进行自定......
  • JSX.Element 和 React.ElementType的区别是什么?
    在React和TypeScript中,JSX.Element和React.ElementType代表了两种不同的概念:JSX.Element:JSX.Element是一个类型,表示由JSX编译后生成的实际React元素对象。当你在React应用中使用JSX编写组件时,每一个JSX表达式都会编译为一个JSX.Element对象。例如:constMyComponent:React.......
  • react路由使用
    在介绍ReactRouter的概念以前,需要先区分两个概念:react-router:为React应用提供了路由的核心功能;react-router-dom:基于react-router,加入了在浏览器运行环境下的一些功能。1.安装(本文6.22.3版本)npmi react-router-dom -S2.创建router/index.jsimportGoo......
  • react ref和context
    ref获取domcontext类似provider和injected,用于嵌套很深的爷孙组件传值子组件使用父组件创建的context对象,不能自己创建context创建在函数组件和class组件都是一样的exportletContext1=React.createContext('')<Context1.Providervalue='Contextvalue函数组件'>......
  • react 函数组件和hook
    函数组件1.函数组件没有生命周期2.函数组件没有this3.函数组件通过hook完成各种操作4.函数组件本身就是render函数5.props在函数第一个参数解释useState参考https://www.cnblogs.com/ssszjh/p/14581014.htmlprops参考https://www.cnblogs.com/ssszjh/p/18118746生命周期......
  • react 性能问题和优化
    某个组件更新,子组件也会一起更新react更新采用时间切片,vue则是依赖收集执行更新操作为16ms,如果操过16ms,先暂停更新,让浏览器先渲染时间切片时间是16ms,因为人眼刷新率约60帧,60hz为16ms1.避免state改为同样的值(class用PureComponent,函数组件默认已经处理了)2.处理子组......
  • react 生命周期
    1.class组件初次挂载1.constructor2.getDerivedStateFromProps3.render4.componentDidMount 更新数据1.getDerivedStateFromProps2.shouldComponentUpdate3.render4.componentDidUpdate备注:1.PureComponent里不能写shouldComponentUpdate2.优化性能一般在shoul......
  • react中redux基本使用二
    1.action传参,用payload属性接收  <buttononClick={()=>dispatch(addNum(2))}>+2</button> 2.redux中异步操作,与同步类似,需要比同步多封装一个函数//使用RTK创建store,createSlice创建reducer的切片//使用RTK创建store,createSlice创建reducer的切片import......
  • react中redux基本使用
    1.安装 npminstall@reduxjs/toolkitreact-redux2.创建store目录 3.创建counterStore.js//使用RTK创建store,createSlice创建reducer的切片import{createSlice}from"@reduxjs/toolkit";constcounterSlice=createSlice({//需要一个配置对象作为参数,通过......
  • [React] Using key prop to reset component to avoid useEffect hook
    ThecomponentusinguseEffectwhichisnotnecessary:functionTopicEditor({selectedTopicId}){const[enteredNote,setEnteredNote]=useState('');constselectedTopic=DUMMY_TOPICS.find(topic=>topic.id===selectedTopicId)......