redux-devtools
redux-devtools copied to clipboard
[custom monitor idea] Selectors debugger
I did not find any particular place where custom monitor ideas are tracked, so i'm adding it here.
selectors are part of popular redux best practices
While it's pretty easy to inspect the store tree with redux-devtool (via chart or monitor), I still find complex to inspect and debug my selectors, which is required when selectors get complex.
For instance, I often find my self dropping <JSONTree /> with the output of some selectors in the middle of a component to debug the selectors.
The same way it's possible to register the app's action creators, and trigger them from the dev-tool, I think we could register the selectors and have a custom monitor to inspect the output of those selectors.
I had a very similar idea and wanted to take a stab. I will likely start on it this weekend; hopefully will have something soon. Still learning the redux-devtools API and such.
I am interested in this also. A couple options:
- look at the prop in the React devtools
- https://github.com/skortchmark9/reselect-tools (also see https://github.com/reactjs/reselect/issues/279)
I would love to work with someone on integrating reselect-tools into redux devtools, in fact that was my original intention. I think about selectors as computed state, so I think they should live with the rest of the state.
That being said, my progress on reselect-tools has mostly halted, because progress on reselect itself has mostly halted and I haven't been able to get any devtools hooks into the core library.
Having Reselect Tools added as a tab in Redux DevTools extension would be awesome.
Even better would be if we had selector values shown in a different color directly alongside the Redux state in the existing State tab for Redux DevTools (in all of the sections - Tree, Chart, and Raw)