reactjs - 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 实际上只是为您存储和管理数据，而不是类实例。类实例增加了所有问题或问题:它们序列化很糟糕(就像你遇到的那样)，而且它们经常在 redux 数据流之外更改自己的属性，这导致各种未指定的行为。此外，它经常会破坏开发工具。

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

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