React Native项目Redux状态偶发non-serializable不可序列化值报错如何解决

排查解决思路 #

• 第一步：校验入参receivedUser的序列化合法性
  偶发报错大概率是部分场景下传入的receivedUser携带了不可序列化的隐形属性：比如从React Native原生模块、导航参数、第三方SDK返回的对象可能被挂载了Symbol类型标记、原生代理属性，或者被意外添加了函数类型的方法，这些属性普通console.log不会打印出来。
  你可以在dispatch前添加校验代码定位问题：

import { isSerializable } from '@reduxjs/toolkit'

const onSendRequest = (recievedUser) => {
  // 新增校验逻辑
  if (!isSerializable(recievedUser)) {
    console.warn('收到不可序列化的user对象，属性明细：')
    Object.entries(recievedUser).forEach(([key, value]) => {
      console.log(`属性${key} 可序列化状态：${isSerializable(value)} 类型：${typeof value}`)
    })
  }
  // 原有逻辑...
}

定位到问题属性后，你可以在存储前对user对象做一次洗数据操作，只保留需要的字段：

// 示例：只保留需要存的字段
const cleanedUser = {
  id: recievedUser.id,
  email: recievedUser.email,
  firstName: recievedUser.firstName
  // 其他需要的字段
}
// 或者粗暴洗数据：JSON序列化再反序列化，会自动过滤不可序列化的属性
// const cleanedUser = JSON.parse(JSON.stringify(recievedUser))

// 后续用cleanedUser代替recievedUser存入Redux

• 第二步：修正slice中的错误写法
  你在sentRequest.js中定义的getList reducer是完全错误的：createSlice的reducers字段只能定义修改状态的纯函数，不能作为查询状态的方法使用，要获取sentRequests列表直接通过useSelector(state => state.sentRequests)取值即可。如果不小心触发了这个错误的reducer，可能会导致状态异常进而触发序列化报错，建议直接删除这个冗余的reducer配置。

• 第三步：排查其他可能的污染源
  确认alreadySentTo的来源，如果是从Redux中取出的旧列表，需要排查是否之前的操作已经往列表中存入了不可序列化的对象，本次更新只是触发了Redux的全量序列化检查而已。

• 临时绕过方案（不推荐）
  如果确认业务数据没有问题，只是第三方返回的对象自带不可序列化属性无法清理，可以临时关闭Redux Toolkit的序列化检查，修改store.js配置：

import { configureStore } from "@reduxjs/toolkit";
import likeReducer from "./like";
import sentRequests from "./sentRequests";
import loggedInUserSlice from "./loggedInUser";
import commentsReducer from "./comments";

export default store = configureStore({
  reducer: {
    like: likeReducer,
    comments: commentsReducer,
    loggedInUserSlice: loggedInUserSlice.reducer,
    sentRequests,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false
  })
});

内容的提问来源于stack exchange，提问作者Shareup Dev