search

reduxjs / redux-devtools

DevTools for Redux with hot reloading, action replay, and customizable UI
http://youtube.com/watch?v=xsSnOQynTHs
MIT License
14.03k stars 1.17k forks source link

Feature: Copy data displayed in tree node. #697

Open travrob1 opened 3 years ago

travrob1 commented 3 years ago

I have some redux stores with massive amounts of data. I am able to find the data i need easy enough via the tree view with collapsing and expanding the tree nodes. However, once i have found what i want, i can NOT easily 'copy' that data. If i want to copy, then i need to go into the raw view, but due to the amount of data it becomes a real challenge to find that data i want. I have learned that i can 'pin' data in the tree view, which then makes it easier to search the raw view and get the data i need but still challening. It would be so fantastic if there were another button next to the 'pin' button. that would copy the data.

markerikson commented 3 years ago

Totally agree that would be useful, or possibly a right-click "Copy" context menu.

Would love to see a PR for this!

Methuselah96 commented 3 years ago

Definitely sounds useful. PRs are welcome.

puzzlemeter commented 3 years ago

Hello, I am new to this project. Recently, I changed my job and start learning React&Redux and learning how-to develop browser extension. (I have experiences with Vue.js. But, actually I was mainly a backend developer using ruby and PHP.) I don't have react experienced colleagues, so I think this project is awesome to me to dive deep.

In brief, I tried to work on it and looks it works.

redux-devtools2

But there are three questions that I am not sure whether I did it properly.

  1. Is there any preferred clipboard library for the whole project.
  2. Whether I write the function in a correct way.
  3. I didn't made it with a context menu. Any plan about shared context menu components in the future.

Hope can get some ideas. Details below.

First, I read the react-devtools-shared's code and choose clipboard-polyfill as clipboard library. However, I also find the library react-copy-to-clipboard, looks light and friendly to react. So, it comes to my first question.

Second, I have not catch up all the structure of this project. Simply add a handler in ActionPreview.tsx.

Third, actually, I didn't use context menu, just add a (copy) beside the (pin). I tried to do it at the beginning. But I found the project have not yet made any shared context menu components. Similar to the second question, if I am going to add a context menu, I need to decide where to place the components. Once it made, may have impact on the whole project. As a new comer, a little hard to me to make a decision.

markerikson commented 3 years ago

Hey there, thanks for taking a look at this!

While I'm not the maintainer for the DevTools, I do maintain Redux itself. My suggestion would be to go ahead and put together a complete prototype, and I do think having a context menu pop up when clicking a state item would be the right design choice.

For now, I'd say just pick what you think is the best place for any new files to go, and then file a PR once you've got a first iteration ready to try out. Then we can review it and see if there's a better way to organize things.

FWIW, that's basically what I did when I submitted a PR a couple years ago to add the "action stack trace" feature:

https://github.com/zalmoxisus/remotedev-app/pull/43