如何克服“不可序列化值检测”

Question

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

在操作中检测到不可序列化的值，路径为：

payload.0.timestamps.registeredAt

在操作中检测到不可序列化的值，路径为：

payload.0.profile.location

。

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

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

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

如果有人提供一些线索，我将非常感激。

Answer 1

查看

使用 redux 工具包时出现错误“在状态中检测到不可序列化的值” - 但使用普通 redux 时则不然

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

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

Answer 2

解决此问题的最佳方法是将数据转换为可序列化的数据，以便您可以安全地存储在您的状态中。 根据样式指南，您不应将不可序列化的值放入状态或操作中。

这样做的一个好地方是在减速器

prepare

函数中。

Answer 3

谢谢，我正在寻找解决方案。 ChatGPT 和 Gemini 都没有帮助我以及这个帖子中的答案！

这个解决方案对我有用： 导出默认configureStore({ 减速器：{ 计数器：counterReducer， 搜索鞋子：搜索鞋子减速器， }, 中间件：（getDefaultMiddleware）=> getDefaultMiddleware（{ 可序列化检查： false }), });