Question

我通过简单地将对象转换为字符串并通过websocket发送并接收和解析并分派到存储来直接从一个客户端向另一个客户端发送redux状态。

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

"{"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=

表示对象无效作为反应客户端。这是图像中对象的字符串化版本。

{
  "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
        }
      ]
    }
  }
}

请注意道具可以嵌套在这里。我尝试了一个hack，它创建了一个null React.creatElement并合并了两个对象，这样我就失去了＆＃39; $$ typeof＆＃39;关键，它工作，但我正在寻找更好的方式或社区的答案。谢谢！

Answer 1

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

更好的方法是将反应状态作为JSON（或其一部分）传递给另一个客户端，并使用reducer更新客户端状态。当状态将更新时，你的React组件也应该是。

示例：

使用websocket发送消息，其中包含在JSON中序列化的对象redux动作。在redux中，Action (Object)是一个普通对象，描述了对您的应用程序有意义的变化，并且可以序列化。从接收消息的客户端，解析JSON，以便您可以重新创建操作对象。现在重新调度您的操作，以便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

将字符串化后的Redux状态共享给其他客户端并不起作用

1 个答案: