如何持久化Redux slice状态？extraReducers更新状态刷新后不持久化问题

问题根因 #

这个问题和你使用extraReducers还是reducers修改状态无关，核心是状态中存在不可序列化的复杂对象，导致redux-persist序列化失败，整个blockchain分片都没有被写入本地存储：

1. 你在ethWeb3.instance中存储的Web3实例、contract字段存储的合约实例，都是包含内置方法、代理对象、循环引用的复杂结构，无法通过JSON序列化存入localStorage。
2. 你虽然在store配置中关闭了redux-toolkit的序列化检查，只是屏蔽了控制台警告，没有解决redux-persist无法序列化存储的本质问题。
3. redux-persist遇到序列化失败的分片时，会直接跳过该分片的存储，所以你看不到本地存储有blockchain相关的数据。

解决方案 #

1. 过滤不可序列化字段 #

你代码中已经引入了createWhitelistFilter，只需要在persist配置中添加转换器，只保留需要持久化的可序列化字段即可：

// 修改Store.ts中的persistConfig
const persistConfig = {
  key: "root",
  version: 1,
  storage,
  whitelist: ['blockchain'],
  transforms: [
    // 仅持久化blockchain分片中的可序列化字段
    createWhitelistFilter('blockchain', [
      'ethWeb3.connected', 
      'ethWeb3.walletAddress'
    ])
  ]
}

2. 刷新后重新初始化实例 #

持久化connected和walletAddress后，页面加载时如果检测到connected为true，直接调用initWeb3Instance重新生成Web3实例即可，无需用户再次触发钱包连接流程。

额外注意 #

不要在redux状态中存储任何不可序列化的对象（包括DOM节点、类实例、函数、Promise等），这是Redux官方的最佳实践，也能避免各类持久化、时间旅行调试的问题。

内容的提问来源于stack exchange，提问作者0rando