javascript - 将 Redux 状态共享给其他客户端在字符串化时不起作用

Question

我直接将 redux 状态从一个客户端发送到另一个客户端，方法是将对象简单地转换为字符串并通过 websocket 发送，然后接收、解析并分派(dispatch)到存储。

问题是如果对象是这样的:

"{"type":"some_action","uid":"1","updates":{"attributes":{"content":["hello"]}}}"

然后它工作正常但如果让我们说对象是这样的:

然后我在其他客户端上收到错误:https://facebook.github.io/react/docs/error-decoder.html?invariant=31&args%5B%5D=object%20with%20keys%20%7Btype%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D&args%5B%5D=

哪些状态对象作为 React 客户端无效。这是图像中对象的字符串化版本。

{
  "type": "some_action",
  "uid": "1",
  "updates": {
    "attributes": {
      "content": [
        {
          "type": "em",
          "key": "_domReact2",
          "ref": null,
          "props": {
            "children": {
              "type": "strong",
              "key": "_domReact1",
              "ref": null,
              "props": {
                "children": "a"
              },
              "_owner": null
            }
          },
          "_owner": null
        }
      ]
    }
  }
}

请注意这里可以嵌套 props。我尝试了一个 hack，它创建了一个空的 React.creatElement 并合并了两个对象，这样我就丢失了 '$$typeof' 键并且它有效，但我正在寻找更好的方法或来自社区的答案。谢谢!

Answer 1

如果使用 JSON.stringify() 将 React 组件或具有函数的对象转换为 JSON 字符串，您将丢失所有函数，只保留属性。因此，当使用 JSON.parse() 转换回对象时，对象无法正常工作。示例如下。

更好的方法可能是将 react 状态作为 JSON(或其中的一部分)传递给另一个客户端，并使用 reducer 来更新客户端状态。当状态更新时，您的 React 组件也应该更新。

例子:

使用包含以 JSON 序列化的对象 redux 操作的 websocket 发送消息。在 redux 中，Action (Object) 是一个普通对象，描述对您的应用程序有意义的更改，并且可以序列化。从接收消息的客户端解析 JSON，以便您可以重新创建操作对象。现在重新分派(dispatch)你的 Action ，以便 reducer 可以修改该客户端中的状态。为此，请使用 dispatch(action) 来触发状态更改。

let test = {
   a(){
    alert('hi')
   },
   b: 'prop'
};

let str = JSON.stringify(test);
console.log(str);

let obj = JSON.parse(str);
console.log(obj); // a has been lost