Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
redux-devtools
Advanced tools
A live-editing time travel environment for Redux.
See Dan's React Europe talk demoing it!
Note that the implemention in this repository is different from Redux DevTools Extension. Please refer to the latter for browser extension.
persistState()
store enhancer, you can persist debug sessions across page reloadsRedux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see walkthrough for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using LogMonitor
for inspecting the state and time travel, and wrap it in a DockMonitor
to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out the LogMonitor
documentation.
If you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using Redux DevTools Extension for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesn’t require installing any packages.
Read the installation walkthrough for integration instructions and usage examples (<DevTools>
component, DevTools.instrument()
, exclude from production builds, gotchas).
Clone the project:
git clone https://github.com/reduxjs/redux-devtools.git
cd redux-devtools/packages/redux-devtools
Run npm install
in the package folder:
npm install
Now you can open an example folder and run npm install
there:
cd examples/counter # or examples/todomvc
npm install
Finally, run the development server and open the page:
npm start
open http://localhost:3000
Try clicking on actions in the log, or changing some code inside the reducers. You should see the action log re-evaluate the state on every code change.
Also try opening http://localhost:3000/?debug_session=123
, click around, and then refresh. You should see that all actions have been restored from the local storage.
DevTools accepts monitor components so you can build a completely custom UI. LogMonitor
and DockMonitor
are just examples of what is possible.
I challenge you to build a custom monitor for Redux DevTools!
Some crazy ideas for custom monitors:
LogMonitor
propTypes
to see what you can do.In fact some of these are implemented already:
(Does not have a UI but can wrap any other monitor)
Create a PR to add your custom monitor.
MIT
FAQs
Redux DevTools with hot reloading and time travel
The npm package redux-devtools receives a total of 47,348 weekly downloads. As such, redux-devtools popularity was classified as popular.
We found that redux-devtools demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.