Time Travel + React + Redux

Rethna Ganesh
Jul 27, 2017 · 2 min read

There are many science fiction movies, novels and short-stories on Time Travel. And there are many more to come as it is a fascinating concept, that we all long for, to be real. If Time Travel is possible, we shall re-live the moments we loved, and most importantly we shall correct our past mistakes. But most certainly Time Travel is never going to happen.

Ctrl + Z

But fortunately computers have ctrl+z option. The three paras which I accidentally deleted, was restored by a single trigger of ctrl+z. All editors comes with undo/redo feature. And any editor without undo/redo is incomplete or is not considered good.

I was into developing various types of web based editors (text, image, svg, printable) for the past five years. It was highly challenging and interesting at the same time. But writing the code for undo/redo was always a pain point. Over 25% of my development time went into undo/redo implementation. And there were hundred of ways in which a bug can occur. The most robust undo/redo history had lead to memory leaks. And with every new change request, I had to modify some of the undo/redo logic.

React & Redux

While creating these types of complex application, I always went with plain javascript, instead of frameworks or libraries, because performance is the top priority. But last year I tried with React and Redux. Initially I was not very confident, but as I went along, I discovered React/Redux is the best combination for developing web based editors. The major advantage is, when modifying the behavior of some of the components, I am able to do it fast and without any side-effects.

Initially I was skeptical about saving the whole state in a single variable, as it may cause performance issues. But I was proved wrong. Though a new state was created for every minor change, the new data was created only for the changed properties. Just like how a new commit in git manages only the changed code.

Redux-Undo

The best part is, implementing the undo/redo feature become very very simple. And it is isolated from the implementation details of the editor. Just in a couple of hours I can manage to implement it with no bugs. Apart from Undo/Redo we can easily track the whole journey of your edit, and easily go to any point of reference.

Critical Bugs

This Time Travel in application can also come helpful in fixing critical bugs. Most of the time identifying the cause of the bug is very difficult. Some time, a bug may happen at step -5, but it will take a visual manifestation only at step 7. From the observer point of view, step 5 and 6 are okay and the problem is only with step 7. With this wrong observation, we proceed in the wrong direction. But with Time Travel it will become easy to locate and fix these types of complex bugs.

Written by

A Javascript Freelancer/consultant.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade