redux-devtools

>> React is not traditionally used for making games, but that's part of the fun and the challenge. From https://news.ycombinator.com/item?id=38437821 : > MS Flight Simulator cockpits are built with MSFS Avionics Framework which is React-like and MIT licensed: https://github.com/microsoft/msfs-avionics-mirror/tree/main/... preactjs may or may not be faster: https://preactjs.com/ Million.js is faster than preact, and lists a number of references under Acknowledgements: https://github.com/aidenybai/million#acknowledgments https://million.dev/docs : > We use a novel approach to the virtual DOM called the block virtual DOM. You can read more on what the block virtual DOM is with Virtual DOM: Back in Block and how we make it happen in React with Behind the block(). React API reference > Components > Profiler: https://react.dev/reference/rea

That's really interesting. I honestly haven't given Redux DevTools much thought despite the fact I use it daily as a core part of my workflow. I thought, like I said before, it was mostly just visualizing artifacts produced normally by Redux. Makes the browser extension much more interesting! edit: Here's the link where it's implemented in redux-devtools if anyone else is curious https://github.com/reduxjs/redux-devtools/blob/master/src/cr...

Yes. Redux's advantages are only relevant if you have a lot of changing/updating data, which usually comes from user input. My personal litmus test is if the Redux devtools (https://github.com/gaearon/redux-devtools) sound like a must-have feature.

And it's built on Redux, so you can time travel in that way too! ;) https://github.com/gaearon/redux-devtools

I use Webpack's Hot Module Replacement [0] along with Redux [1] and React. It's extremely useful for iterating on user interfaces. You just save and your styles and markup update without having to reload. Furthermore, Redux has a devtools library [2] (you can view a gif of it in action in the repo) that lets you do time-travel for debugging purposes. I don't use it much, but it can be occasionally useful. [0] http://webpack.github.io/docs/hot-module-replacement-with-we... [1] http://redux.js.org/ [2] https://github.com/gaearon/redux-devtools

I've a good few years web programming experience: Rails, PHP, HTML/CSS/JS (jQuery), SQL, ... you get the idea. Apart from keeping up to date with Rails nothing 'modern'. I've spent the last week (finally!) trying and in the end succeeding to wrap my head around React+Redux. It took a many many many hours of puzzlement. I began with the react+slingshot[0] @coryhouse made as a starter kit and going through the React docs and Redux docs. I guess my desire stemmed from seeing Dan's demo of Redux's time-travel and hot reloading ability, I was intrigued. I copied the TODO example from the Redux docs and fashioned it to my liking exploring all the parts. I'm here to tell you that it's not easy. The landscape is still in flux (buh-dum-tish, I'll be here all week folks) and that for every piece of the dev tool puzzle you've two or three options. I

The Redux Devtools project has an example folder with already structured examples [1]. Cool thing is that it comes with all the webpack hot-reloading already setup, and with the ability to do undo/redo changes thanks to the devtools capability. In essence, it's the only project I found that comes with the ability to code your entire app without ever having to reload your browser, and/or having to reproduce the actions manually. When you find a bug, you go and fix it, and magically everything goes back to the same state you were into without you having to click through the various buttons/panels/whatever that brought you there. 1. https://github.com/gaearon/redux-devtools/tree/master/exampl...

Along these lines, this is why I love hot-loading code. For example, there's react-hot-loader [0] (which was actually superseded already by react-transform [1]). This enables you to iterate much more quickly while you're building an interface. Along that same line, the same guy created redux and redux-devtools [2], which also enables you to iterate quickly on application code. I've been using hotloading css, react and redux for the past few months and it's an amazing experience. It enables you to iterate quickly and see changes immediately. (Admittedly, as a project grows, there's a small delay between saving and seeing the change. I'm not sure if it's avoidable or not... But it's still much faster than having to do a full-page reload.) [0] https://gaearon.github.io/react-hot-loader/ [1] https://github.com/gaearon/react-transform-boilerp

Dude, this is half the point of redux. Theres a debugger that lets you visually step through every state of the store and your corresponding app - https://github.com/gaearon/redux-devtools