React+Redux 數(shù)據(jù)存儲(chǔ)持久化

1、安裝相關(guān)依賴

yarn add @reduxjs/toolkit redux react-redux redux-persist

2、userSlice：用戶狀態(tài)數(shù)據(jù)切片封裝

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface IUserInfo {
  userName: string
  avatar?: string
  brief?: string
}

// 使用該類型定義初始 state
const initialState = {
  userInfo: <IUserInfo>{
    userName: 'zh',
    brief: '無(wú)心'
  }
}

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // action: {
    //   payload: { uerName: 'zhw' },
    //   type: 'user/updateUserName'    name + 方法名
    // }
    // 使用: dispatch(updateUserName({ uerName: 'zhw' }))
    // // 使用 PayloadAction 類型聲明 `action.payload` 的內(nèi)容
    updateUserInfo: (state, action: PayloadAction<IUserInfo>) => {
      // Redux Toolkit 允許在 reducers 中編寫(xiě) "mutating" 邏輯。
      // 它實(shí)際上并沒(méi)有改變 state，因?yàn)槭褂玫氖?Immer 庫(kù)，檢測(cè)到“草稿 state”的變化并產(chǎn)生一個(gè)全新的
      // 基于這些更改的不可變的 state。

      state.userInfo = action.payload
    }
  }
})

// 導(dǎo)出修改state  dispatch時(shí)的actions
export const { updateUserInfo } = userSlice.actions
export default userSlice.reducer

3、在store的index.ts中

默認(rèn)已經(jīng)模塊化了reducers，如下圖所示

// configureStore: store配置項(xiàng)
import { configureStore } from '@reduxjs/toolkit'
// combineReducers： 組合reducers目錄下的所有reducer模塊
import { combineReducers } from 'redux'
// 數(shù)據(jù)持久化
import { persistStore, persistReducer } from 'redux-persist'
// defaults to localStorage for web
import storageLocation from 'redux-persist/lib/storage' 
// import storageSession from 'redux-persist/lib/storage/session'

// 導(dǎo)入自己封裝好的reducers
import userReducer from './reducers/userSlice'
// 持久化存儲(chǔ)配置對(duì)象
const persistConfig = {
  key: 'root',
  version: 1,
  storage: storageLocation
}
// 持久化處理后的reducers
const persistedReducer = persistReducer(
  persistConfig,
  combineReducers({
    // 數(shù)據(jù)切片
    userReducer
  })
)
// 將初九話插件和store通過(guò)middleware關(guān)聯(lián)起來(lái)
const store = configureStore({
  // userReducer 模塊名
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    })
})

// 可以訂閱 store
// store.subscribe(() => console.log(store.getState(), 'userSlice'))

// 持久化的store
const persistor = persistStore(store)

export { store, persistor }

4、將store和App組件關(guān)聯(lián)起來(lái)

import React from 'react'
import ReactDOM from 'react-dom/client'
// UI css
// antd v5 自帶的重置樣式
import 'antd/dist/reset.css'
// 自定義css
import '@/assets/style/global.scss'

// 導(dǎo)入路由模式
import { BrowserRouter } from 'react-router-dom'
// 導(dǎo)入redux倉(cāng)庫(kù)
import { Provider } from 'react-redux'
import { store, persistor } from '@/store'
// store持久化
import { PersistGate } from 'redux-persist/integration/react'

import App from './App.tsx'

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

5、在組件中使用store

import { useSelector, useDispatch } from 'react-redux'
import { updateUserInfo } from '@/store/reducers/userSlice'
const Home = () => {
  const {
    userInfo: { userName, brief }
  } = useSelector((state: RootState) => state.userReducer)

  const dispatch = useDispatch()
  const test = () => {
    dispatch(updateUserInfo({ userName: 'zhw', brief: '那就這樣吧' }))
  }
  return (
    <>
      <div>home page</div>
      <p>{userName}</p>
      <p>{brief}</p>
      <button onClick={test}>測(cè)試</button>
    </>
  )
}
export default Home

數(shù)據(jù)持續(xù)化存儲(chǔ)github redux-persist
redux工具redux RTK

redux官網(wǎng) redux文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-601690.html

到了這里，關(guān)于React+Redux 數(shù)據(jù)存儲(chǔ)持久化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！