React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist)

React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist)

安装

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

简单使用store

//counterSlice.js


import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementNum: (state, action) => {
      state.value += action.payload
    }
  }
})

//导出方法
export const { increment, decrement, incrementNum } = counterSlice.actions

//导出reducer
export default counterSlice.reducer

//store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../store/counterSlice'

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export default store

//main.js

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

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

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

使用

//导入
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement, incrementNum } from '../../store/counterSlice'

//在组件中定义
  const dispatch = useDispatch()
  const count = useSelector((state) => state.counter.value)
  
//在页面中使用
  <div className="space-x-2">
      <Button onClick={() => dispatch(decrement())}>减1</Button>
      <span>{count}</span>
      <Button onClick={() => dispatch(increment())}>加1</Button>
      <Button onClick={() => dispatch(incrementNum(5))}>加5</Button>
  </div>

已经可以在react中简单使用仓库了

但是点击刷新时数据会消失，于是需要做数据的持久化

使用中间件redux-persist

只需更改store.js文件，更改后：

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
// 选择持久化存储引擎，如 localStorage 或 AsyncStorage
import storage from 'redux-persist/lib/storage' // 默认使用localStorage作为存储引擎
import counterReducer from '../store/counterSlice'

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)

点击刷新数据不会消失了