【React】redux数据持久化存储（react-redux、redux-RTK）

最新推荐文章于 2024-06-07 09:43:55 发布

小川zs

最新推荐文章于 2024-06-07 09:43:55 发布

阅读量729

点赞数 3

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/CWK13400405244/article/details/130894519

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【React】redux数据持久化存储（react-redux、redux-RTK）

1、下载依赖

npm i redux redux-persist

2、src/redux/index.jsx

import {configureStore} from "@reduxjs/toolkit";

import {userInfoReduce} from "./userInfoSlice.jsx";
import {globalReducer} from "./globalSlice.jsx";

import {combineReducers} from "redux";
import {persistReducer, persistStore} from 'redux-persist';
import storageSession  from 'redux-persist/lib/storage/session';  //sessionStorage
//import storageLocation  from 'redux-persist/lib/storage'; //存储到localStorage


const persistConfig = {
    key:'root',
    storage:storageSession,  //指定存储到session中
}

const persistedReducer = persistReducer(
    persistConfig,
    combineReducers({
        //数据切片
        userInfo:userInfoReduce,
        globalX:globalReducer
    })
)

export const store = configureStore({
    reducer:persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: false,
        }),
})
export const persistor = persistStore(store)

3、src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

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

ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App/>
        </PersistGate>
    </Provider>
)