如何克服“A non-serializable value detection”

Posted 2023-02-19

【中文标题】如何克服“A non-serializable value detection”

【英文标题】：How to overcome "A non-serializable value detection"

【发布时间】：2020-09-26 05:11:59

【问题描述】：

我正在使用 redux-toolkit 实现 react 应用，从 firestore 获取数据时出现此类错误。

在操作中检测到​​不可序列化的值，路径为：payload.0.timestamps.registeredAt

在路径中的操作中检测到​​不可序列化的值：payload.0.profile.location。

前者的数据类型为firebase.firestore.Timestamp，后者为GeoPoint。 我认为两者都可能无法序列化，但我想获取这些数据并将它们展示给用户。 我怎样才能克服这些错误？ 根据this issue，我可能会这样写；

const store = configureStore(
 reducer: rootReducer,
 middleware: [
  ...getDefaultMiddleware(
  serializableCheck: 
     ignoredActionPaths: ['meta.arg', 'meta.timestamp'], // replace the left to my path
     ,
  ),
  reduxWebsocketMiddleware,
 // ... your other middleware
],
);

但我不确定它是否安全，即使安全，我也不知道如何编写路径动态方式，因为我的有效载荷是数组。

如果有人能提供一些线索，我将不胜感激。

【参考方案1】：

去看看

Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux

根据 Rahad Rahman 的回答，我在 store.ts 中做了以下操作：

export default configureStore(
    reducer: 
        counter: counterReducer,
        searchShoes: searchShoesReducer,
    ,    
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(
        serializableCheck: false
    ),
);

【参考方案2】：

解决此问题的最佳方法是将这些数据转换为可序列化的数据，以便您可以安全地存储在您的状态中。 根据风格指南，你should not put Non-Serializable Values in State or Actions。

在 reducer prepare 函数中这样做是一个好地方。