how to time travel debugging at redux-devtools
Purpose
If you used redux in web application devlopment, you may have experience to use time-travel debugging with redux-devtools.
If you have confused about what redux-devtools
is, please see below video.
If you don't have any experience about redux-devtools
, I think it may be difficult to understand this article.
redux-devtools
records the redux information(action, reducer state) of web applications using redux,
rollback to the reducer at a specific point in time and can pretend that there was no specific action.
However, It is not simple to try to implement similar actions inside web applictions without using redux-devtools
.
For example, If you press the A button, make as if The action that's been happening so far didn't happen
or if you leave before pressing the Submit button, rollback all actions that occurred on the page.
redux-devtools
is an easy to provide function with buttons, but I don't know how to implement it myself.
How does redux-devtools
make these things possible?
In this article, we will check below three things.
- How to log the actions and reducer called in
redux-devtools
. - How to jump to a point where specific action is dispatched in
redux-devtools
. - How to skip a specific action as if it did not work in
redux-devtools
- The experience about redux-devtools
- The intelligence about redux enhancer
- This article doesn't include content of
browser extension
- This article will say about core of
redux-devtools
and you can understand if you don't know aboutbrowser extension
- If you want to know
browser extension
, It may not fit the purpose of this article.