持久化Store | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

引言

在写项目的时候遇到这样的场景: 在浏览器上刷新而不丢失存储在redux中的数据

因为用了react-toolkit(RTK) 的TS版本作为React的状态管理工具,某些状态需要在刷新之后不丢失数据的情况下,虽然可以直接使用lcoalStorage与serissonStorage这两个浏览器API,但想到需要的保存的状态可能会随着代码量的增加而重复去书写,就想到了使用一种持久化的库,那么在业界内使用比较知名的持久化库redux-persist(使用浏览器的API来存储这些状态的),本文以TS来讲解

使用

1. 安装redux-persist 已经安装了react-redux与@reduxjs/toolkit的情况: 只需要安装此库即可

pnpm i redux-persist
or
yarn add redux-persist

配置

1. 设置redux-persist配置

// store/index.ts
import storage from 'redux-persist/lib/storage'

// redux-persist配置
const persistConfig = {
    key:'root', // 给浏览器的DevTools以及相关插件识别的名称
    storage // 存储方式: 默认localStorage, 可使用serissonStore浏览器会话级别存储
}

2. 配置reducer

import { configureStore, combineReducers } from '@reduxjs/toolkit'

import userReducer from '../features/user' // 导入Reducer

// 根Reducer配置
const rootReducer = combineReducers({
    user: userReducer,
})

3. 持久化状态

// 持久化reducer状态
const persistReducer = persistReducer(persistConfig,rootReducers)

// redux-tookit的配置
export const store = configureStore({
    reducer: persistReducer
})

4. 导入使用 // app主入口文件 一般是index.ts (vite是main.ts, next是_app.ts) 核心代码:

// _app.ts
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

import { store } from '@/store'

function App () {
  return (
    <Provider store={ store }>
      <PersistGate persistor={ persistStore(store) }>
        <App/>
      </PersistGate>
    </Provider>
  )
}

使用

store 配置

import { configureStore, combineReducers } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

// 用户行为
import userReducer from '@/features/user'

// 配置redux-persist
const persistConfig = {
  key: 'root',
  storage,
}

// Reducer
const rootReducers = combineReducers({
  user: userReducer,
})

// 持久化状态
const persistedReducer = persistReducer(persistConfig, rootReducers)

export const store = configureStore({
  reducer: persistedReducer,
})

export type RootStore = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

app配置:

• react.js

// index.ts
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

function App () {
  return (
    <Provider store={ store }>
      <PersistGate persistor={ persistStore(store) }>
        <App/>
      </PersistGate>
    </Provider>
  )
}

如果你使用的是next.js:

// _app.ts
import type { AppProps } from 'next/app'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

// 持久化的store
import { store } from '@/store'

function MyApp ({ Component, pageProps }: AppProps) {
  return (
    <Provider store={ store }>
      <PersistGate persistor={ persistStore(store) }>
        <Component { ...pageProps } />
      </PersistGate>
    </Provider>
  )
}

export default MyApp