Skip to main content

One post tagged with "time-travel"

View All Tags

how to time travel debugging at redux-devtools

· 25 min read
Hyunmo Ahn
Front End Engineer @ Line+

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
PREREQUISITES
Caution
  • 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 about browser extension
  • If you want to know browser extension, It may not fit the purpose of this article.