jsonState = localStorage['persist:root'] //gets the raw JSON
firstLevel = JSON.parse(jsonState) //parses the first level, which seems to contain more JSON as values
state = Object.fromEntries( //makes a new object from the pairs...
Object.entries(firstLevel) //...when we split every key-value pair...
.map(([k, v]) => [k, JSON.parse(v)]) //...to parse their values
)
字符串 或者,作为一个丑陋的一行字:
state = Object.fromEntries(Object.entries(JSON.parse(window.localStorage['persist:root'])).map(([key, json]) => [key, JSON.parse(json)]))
7条答案
按热度按时间mhd8tkvw1#
不幸的是,最简单的解决方案是修改源代码,为Redux商店设置一个全局变量。(为了让Safari更容易调试,可能值得预先修改您可以控制的任何应用程序。)
在不修改源代码的情况下,这应该是可能的,尽管这很尴尬。以下说明适用于React 16.12.0。
1.在Safari的Web Inspector(开发工具)中,转到Elements选项卡并找到您的React根元素(传递给
ReactDOM.render
的<div id="root">
或类似元素)。1.点击它。Web Inspector应该在它旁边显示一个
= $0
,表明您现在可以在Web Inspector控制台中将该DOM节点引用为$0
。1.在Web Inspector的Console选项卡中,键入
Object.keys($0)
并按Enter键以查看React添加到DOM节点的内部属性。对于我的应用程序,我看到["__reactContainere$8yexuoe6iiv", "_reactRootContainer"]
。1.通过键入
$0["__reactContainere$8yexuoe6iiv"]
(替换您的内部属性名称)并按Enter将内部React对象转储到控制台。1.检查对象属性以找到Redux商店:在我的应用程序中,它在
child
下,在memoizedProps
下,在store
下,但这可能取决于您的React组件层次结构的具体情况以及您在何处以及如何挂载Redux的<Provider>
。1.使用您刚刚找到的
store
引用来调用Redux的getState。对于我的应用程序,这意味着输入$0["__reactContainere$8yexuoe6iiv"].child.memoizedProps.store.getState()
并按Enter。一个更简单的一行替代上面的:
字符串
55ooxyrt2#
如果你使用的是
Nextjs
框架,你可以通过在safari中打开控制台来实现这一点。在其中输入window
。展开它。现在只需检查窗口对象属性。你会发现一个类似'__REDUX'或类似的键。在我的情况下,它是__NEXT_REDUX_STORE__
。找到它后,只需在控制台中输入以下内容。:
__NEXT_REDUX_STORE__.getState();
个你现在可以检查你的应用程序的redux状态。
xdyibdwo3#
另一个访问存储的选择是,如果你坚持到localStorage(我猜你是... * 对吗?*),直接从localStorage访问它。
在我的场景中,这意味着:
字符串
或者,作为一个丑陋的一行字:
型
oxosxuxt4#
我不知道有一个用于redux调试的safari扩展(欢迎更正)。这个线程表明,这是由于缺乏dev-tools API:https://github.com/zalmoxisus/redux-devtools-extension/issues/435
Redux状态不在全局作用域中,因此如果不修改源代码,您将无法通过控制台访问它。
nxowjjhe5#
你可以使用
connect
函数提取状态,然后将其字符串化?字符串
然后你可以直观地看到它。
dgtucam16#
加上@josh-kelley的回答。。
在2021年,用Safari Version 12.1(14607.1.40.1.4)进行测试,下面这行代码对我来说很有用:
字符串
注意
children.props
与@josh提到的不同。fv2wmkja7#
根据其GitHub存储库,其他浏览器使用remote-redux-devtools。