Needs a feature to copy/paste or download the current state object

[localjo]

I've had a few situations where it would be really convenient for me to get a copy of just the current state object either saved to a pretty-printed JSON file or copied to the clipboard. The existing download button is similar, but since it downloads actions and computed state, I have to shave a few more yaks to get a clean copy of the state object.

The current best solution I have is to use react-devtools to select my <Provider/> component and then paste JSON.stringify($r.store.getState()) into the console. This works, but requires multiple unintuitive clicks, remembering or finding that code snippet, and then formatting the output.

Since this is something I run into often, it would reduce a lot of friction to have a more streamlined solution, like a "Copy current state to Clipboard" button somewhere in the UI. Another user suggested being able to copy the contents of the log monitor panel just by clicking and dragging, which is another potential solution that would work for this use case.

I'm more than happy to open a PR for this and implement the feature, but before I spend a lot of time on it, I just wanted to check whether or not this is a feature you'd be interested in merging, and if you have any thoughts about the design of the UI/UX for this feature.

[zalmoxisus]

I would suggest to implement this in react-json-tree, so it will work without any changes in this repo and also for other redux devtools monitors. It would be great to have a context menu to Export as a file and Copy the current state subtree. So, it will be possible to copy not only the whole state object but also a state's subtree and the action's payload.

[localjo]

My intuition says a solution involving text selection might not be the right solution here. Consider this screenshot;

A bunch of rhetorical questions; Where does the selection begin and end? Why are some keys not selected/selectable? What should happen with the selected bits that aren't part of the JSON syntax? Should they be selectable at all? Should they indicate selection of a specific part of the state object? If so, which?

It's worth noting that you can't copy and paste the representation of a JS object in the Chrome Devtools either.

For my personal use-case a simple button or context menu item that copies the pretty-printed result of store.getState() to the clipboard would be enough. If that's the solution it wouldn't really be a part of react-json-tree because it really has nothing to do with the tree view at all. However, I could see some value in a context menu item that allows you to copy/save individual nodes from the state object, in which case implementing it in react-json-tree would make sense.

[zalmoxisus]

Well, the screenshot isn't related to the current repo, it's from redux-devtools-inspector. For redux-devtools-log-monitor it looks like this:

So, when you right click on state you'll be able to select from a menu whether to copy this object to clipboard or export in a file, moreover you can copy also todo object (substate of a specific reducer), or let's say you want to copy just text property. Even it will be possible to copy the action object, which is also rather useful. We have already these objects in react-json-tree, it's more about UI.

However, for Inspector Monitor we'll be able to export only a part of state or action object from a context menu, so adding a button there would make sense.

In case we add a menu, then those parts you pointed shouldn't be selectable at all.

[zalmoxisus]

If we get this context menu with the corresponding part of the object, it will be possible even to implement inline editing as suggested in zalmoxisus/remote-redux-devtools#32. Or make this part of the object available in the console as per zalmoxisus/redux-devtools-extension#132.

Though, for most use cases a button as you suggested could be enough. Related to zalmoxisus/redux-devtools-extension#157.

[StevenACoffman]

joshwcomeau/redux-vcr/issues/1 records the series of Redux actions and would like to share functionality with redux-devtools. Might be relevant.

[Startouf]

Thank you very much for the JSON.stringify($r.store.getState()) trick, previously I was copy-pasting from the raw tab, but it wasn't JSON and actually pretty tricky to convert to proper JSON

We would just need a "Copy as JSON" button in the State > raw tab.

[tnrich]

Kind of a late response.. the devtools are definitely still lacking this seemingly very important and useful feature. In the meantime I'd recommend popping the redux store onto the window itself and then doing the following:

window.myGlobalStore.getState()

Then it's as easy as finding the object you're interested in and right clicking to copy it:

[leixd1994]

I found the React DevTool have this function of copy props or state to JSON. see pictures below:

then go to console ,you will find this

then you can copy to JSON by right click mouse ， and choose copy