如何在 ReactJS 中获取多个缓存数据

在 ReactJS 中获取多个缓存数据，需要使用一些第三方库来帮助我们处理缓存。以下介绍两种常用的库，分别为 redux-persist 和 localforage。

redux-persist

redux-persist 是将 Redux 状态持久化到存储中的框架。它支持多种存储引擎，包括 localStorage、sessionStorage，甚至是 AsyncStorage（React Native 专用）。

安装

npm install redux-persist

使用

1. 创建一个 persistConfig 对象，用于配置存储引擎和要缓存的 Redux 数据。

   import { persistStore, persistReducer } from 'redux-persist'
   import storage from 'redux-persist/lib/storage'
   
   const persistConfig = {
     key: 'root',
     storage,
     // 要持久化的 state 在这里添加
     whitelist: ['auth'],
   }
   

2. 使用 persistReducer 方法来创建持久化后的 Redux reducer，返回值是一个新的 reducer。

   const persistedReducer = persistReducer(persistConfig, rootReducer)
   

3. 使用 persistStore 方法，将持久化后的 reducer 作为参数，创建一个新的 store，并返回一个 Promise。

   import { createStore } from 'redux'
   
   const store = createStore(persistedReducer)
   
   export const persistor = persistStore(store)
   

4. 在组件中使用 useEffect 和 useSelector 钩子来获取缓存的数据。

   import { useSelector } from 'react-redux'
   import { persistor } from './store'
   
   function App() {
     const auth = useSelector((state) => state.auth)
   
     useEffect(() => {
       const fetchData = async () => {
         await persistor.flush()
         // 从缓存中获取数据
         const cachedData = await persistor.getState()
         console.log(cachedData)
       }
   
       fetchData()
     }, [])
   
     return <div>{auth ? 'Authenticated' : 'Not Authenticated'}</div>
   }
   

localforage

localforage 是基于 IndexedDB 的客户端存储库，它提供了一种简单的方式来管理多个不同存储区中的缓存数据。

安装

npm install localforage

使用

1. 初始化 localforage。

   import localforage from 'localforage'
   
   localforage.config({
     name: 'myApp',
     storeName: 'auth',
   })
   

2. 使用 setItem 方法来保存数据。

   localforage.setItem('token', 'myToken')
   

3. 使用 multiGet 方法来获取多个缓存数据。

   localforage.multiGet(['token', 'user']).then((data) => {
     console.log(data)
   })
   

4. 使用 removeItem 方法来删除缓存数据。

   localforage.removeItem('token')
   

总结

通过使用 redux-persist 和 localforage 库，我们可以轻松地实现在 ReactJS 中获取多个缓存数据的功能。具体使用取决于你的场景和需求，两者都提供了不同的方案。