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

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

import { createSlice } from '@reduxjs/toolkit'
// 定义状态类型  
interface Action {  
  payload:number,
  type: string
} 
interface State {  
  count: number
} 
export const counterStore = createSlice({
  // 模块名称独一无二
  name: 'counter',
  // 初始数据
  initialState: {
    count: 1
  },
  // 修改数据的同步方法
  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

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 // 关闭默认的序列化检查//关闭严格模式
    })
})
export const persistor = persistStore(store)

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>
)

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;