🧠 强化版Redux：在不破坏浏览器的情况下将状态持久化到IndexedDB
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
在现代React应用中，结合redux-persist、IndexedDB和fflate压缩，可以有效存储多达50MB的Redux状态，避免localStorage的限制。通过自定义转换实现状态的压缩与解压，保持IndexedDB在安全范围内，并自动清理过期缓存，适用于离线数据和大状态项目。
🎯
关键要点
- 在现代React应用中，状态持久化是必要的，localStorage和sessionStorage存在限制。
- 需要存储多达50MB的页面数据，避免应用变慢或浏览器崩溃。
- 使用redux-persist与redux-persist-indexeddb-storage结合IndexedDB实现持久化。
- 通过fflate库进行状态压缩，提升性能。
- 配置Redux存储时，使用IndexedDB和fflate进行压缩。
- 自定义转换实现状态的压缩与解压，减少持久化状态的大小40-60%。
- 当IndexedDB超过50MB时，可能会遇到QuotaExceededError，因此需要编写递归清理函数。
- 使用useEffect触发清理函数，保持IndexedDB大小在安全范围内。
- IndexedDB与localStorage的比较：IndexedDB支持更大的存储容量和复杂对象。
- 使用IndexedDB和压缩是处理大Redux状态的有效模式，适用于离线数据和缓存。
➡️
