我直接将 redux 状态从一个客户端发送到另一个客户端,方法是将对象简单地转换为字符串并通过 websocket 发送,然后接收、解析并分派(dispatch)到存储。
问题是如果对象是这样的:
"{"type":"some_action","uid":"1","updates":{"attributes":{"content":["hello"]}}}"
然后它工作正常但如果让我们说对象是这样的:
哪些状态对象作为 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' 键并且它有效,但我正在寻找更好的方法或来自社区的答案。谢谢!
最佳答案
如果使用 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
关于javascript - 将 Redux 状态共享给其他客户端在字符串化时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44961688/