React Store及store持久化的使用教程

更新時間：2024年01月17日 14:51:10 作者：想不到耶

這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1.安裝

npm insatll react-redux
npm install @reduxjs/toolkit
npm install redux-persist

2. 使用React Toolkit創(chuàng)建counterStore并配置持久化

store/modules/counterStore.ts：

import { createSlice } from '@reduxjs/toolkit'
// 定義狀態(tài)類型  
interface Action {  
  payload:number,
  type: string
} 
interface State {  
  count: number
} 
export const counterStore = createSlice({
  // 模塊名稱獨一無二
  name: 'counter',
  // 初始數(shù)據(jù)
  initialState: {
    count: 1
  },
  // 修改數(shù)據(jù)的同步方法
  reducers: {
		increment: (state:State) => {
      state.count += 1
    },
    decrement: (state:State) => {
      state.count -= 1
    },
    incrementNum: (state:State, action: Action) => {
      state.count += action.payload
    }
  }
})
// 導出
export const { increment, decrement, incrementNum } = counterStore.actions
export default counterStore.reducer

store/index.ts：

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore'
import { persistStore, persistReducer } from 'redux-persist'
// 選擇持久化存儲引擎，如 localStorage 或 AsyncStorage
import storage from 'redux-persist/lib/storage' // 默認使用localStorage作為存儲引擎
// 組合各個模塊的reducer
const reducer = combineReducers({
  counter: counterReducer
})
// 配置持久化設置
const persistConfig = {
  key: 'root', // 存儲的鍵名
  storage // 持久化存儲引擎
  // 可選的配置項，如白名單、黑名單等 選其一就好了
  // blacklist:['test'], // 只有 test 不會被緩存
  // whitelist: ["test"], // 只有 test 會被緩存
}
const persistedReducer = persistReducer(persistConfig, reducer)
export const store = configureStore({
  reducer: persistedReducer, // 注冊子模塊
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false // 關(guān)閉默認的序列化檢查//關(guān)閉嚴格模式
    })
})
export const persistor = persistStore(store)

3. 為React注入store

react-redux負責把Redux和React 鏈接起來，內(nèi)置 Provider組件，通過 store 參數(shù)把創(chuàng)建好的store實例注入到應用中，鏈接正式建立

main.tsx：

import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from "react-router-dom"
import { Provider } from 'react-redux'
import {store, persistor } from "@/store"
// store持久化
import { PersistGate } from 'redux-persist/integration/react'
ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    {/* 注入router實例 */}
    <BrowserRouter>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>
)

4. React組件使用store中的數(shù)據(jù)

useSelector，作用：在函數(shù)組件中獲取redux數(shù)據(jù)存儲對象中的某個數(shù)據(jù)

useDispatch，作用: 在函數(shù)組件中獲取dipatch方法(用于發(fā)送action給reducer函數(shù))

import React from "react";
import { useDispatch,useSelector } from "react-redux";
import { increment, decrement, incrementNum } from '@/store/modules/counterStore'
const App: React.FC = () => {
  const dispatch = useDispatch()
  const { count } = useSelector((state:any) => state.counter)
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => {dispatch(increment())}}>加1</button>
      <button onClick={() => {dispatch(decrement())}}>減1</button>
      <button onClick={() => {dispatch(incrementNum(5))}}>加5</button>
    </div>
  );
};
export default App;