Redux 持续错误序列化 PeerJS 对象

Question

我正在开发 React/Redux 应用程序，但我的状态有问题。我正在使用 redux-persist 以便在页面刷新时补充我的商店。我正在使用 peerJS 在流媒体用户和正在观看的用户之间建立连接。

在用户登录时，我创建了一个新的对等对象，然后更新了我的 redux 存储。问题是 redux-persist 无法序列化对等对象。似乎在对等对象中有（随机？）字母在对象键之后，但在值之前。在开发过程中，当我进行更改并刷新应用程序时，对等对象不再在我的 Redux 存储中。

例如：

_events: n
__jsogObjectId: "19"

我认为 n（以及其他地方的类似字母）是我的问题开始的地方。

经过一些研究，我在 GitHub 上发现了这个：https://github.com/rt2zz/redux-persist/issues/644#issuecomment-600760196

并且我尝试以同样的方式实施解决方案。

export const JSOGTransform = createTransform(
  (inboundState, key) => JSOG.encode(inboundState),
  (outboundState, key) => JSOG.decode(outboundState)
);

const persistConfig = {
  key: "root",
  storage: storage,
  stateReconciler: autoMergeLevel2,
  transforms: [JSOGTransform],
};

但是还是不行。它似乎在解决一个稍微不同的问题。我不认为它解释了像这样的额外字母。我已经尝试在我的根 persistConfig 中使用转换，以及用于存储对等对象的特定键的配置。两者都不适合我。

这是我商店的代码：

// Import reducers

import userReducer from "./reducers/userReducer.js";
import accountReducer from "./reducers/accountReducer.js";
import streamReducer from "./reducers/streamReducer.js";

// Create transform

export const JSOGTransform = createTransform(
  (inboundState, key) => JSOG.encode(inboundState),
  (outboundState, key) => JSOG.decode(outboundState)
);

const persistConfig = {
  key: "root",
  storage: storage,
  stateReconciler: autoMergeLevel2,
  transforms: [JSOGTransform],
};

const userPersistConfig = {
  key: "User",
  storage: storage,
  stateReconsiler: autoMergeLevel2,
};

const accountPersistConfig = {
  key: "Account",
  storage: storage,
  stateReconciler: autoMergeLevel2,
};

const streamPersistConfig = {
  key: "Stream",
  storage: storage,
  stateReconciler: autoMergeLevel2,
};

const rootReducer = combineReducers({
  User: persistReducer(userPersistConfig, userReducer),
  Account: persistReducer(accountPersistConfig, accountReducer),
  Stream: persistReducer(streamPersistConfig, streamReducer),
});

const customPersistReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(
  customPersistReducer,
  compose(
    applyMiddleware(thunk, logger),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export const persistor = persistStore(store);

解决此问题的最佳方法是什么？更广泛地说，我这样做的方式正确吗？当时用对等对象更新我的商店对我来说很有意义，因为我需要用户之间连接的唯一 ID。但是，如果存储它是一个问题，那么解决这个问题的明智方法是什么？

我正在尝试在更复杂的应用程序上使用 Redux。我不介意重写东西，只要我在学习，并朝着行业最佳实践迈进。

1/16/21 更新：我在 PeerJS 存储库上打开了一个问题，试图获得关于额外字母的答案。但是，对于有关我如何解决该问题的任何反馈，我将不胜感激。

Answer 1

Redux 实际上只是为您存储和管理数据，而不是 class 个实例。 Class 实例添加了所有问题或问题：它们序列化很糟糕（就像你遇到的那样），而且它们经常在 redux 数据流之外更改自己的属性，这会导致各种未指定的行为。此外，它经常破坏开发工具。

这就是为什么 redux 风格指南说 Do Not Put Non-Serializable Values in State or Actions。

你在这里寻找的这个 class 实例实际上不是状态管理解决方案（因为那个 class 实例不是真正的状态），而是依赖注入机制。
幸运的是，React 自带了一个依赖注入机制：Context。是的，这正是上下文的真正含义：使一个对象可用于应用程序中的子组件。所以，我的建议是将你的数据保存在 redux 中，并为这样的事情寻找上下文。

Redux 持续错误序列化 PeerJS 对象

Redux Persist Error Serializing PeerJS Object

reactjs

redux

redux-persist

peerjs