Implementing Undo-Redo in React components using Flux and immutable data-structures

Search

Eat Play Code

A blog by Ameya Karve

Facebook talked about their Flux workflow recently, which uses a one-way data flow in building apps. Brandon Tilley released a simple implementation last week with Fluxxor. He has written a nice description of the overall process here. I have built over the Fluxxor Todo example to implement the Undo functionality myself. You can view a demo of the implementation here.

I tried to extend the Flux store in a way similar to David Nolen with Om, except, I used the immutable structures at the store level rather than on the React components themselves. Extending the store was rather trivial. In the initialize call of the store, I added

I have used strings to store each state as they are immutable in JavaScript. undoStates and redoStates are an implementation of a List from functional programming.

Further, after each update, I add

We also need handlers for undo and redo

Finally, todos, canUndo and canRedo are pushed to the React component state. The corresponding action handlers are also written in.

I have implemented the Undo/Redo for a single store here. To implement the same for multiple stores, we just modify the dispatcher to keep track of what all stores are modified at each step and fire the undo and redo events for each store. We can also implement the functionality for a component that talks with a store trivially too.

You can view the code on Github . If you have any feedback, do write to me at [email protected]

Close

Home

About

Contact

My name is Ameya Karve. I am a software engineer; I mostly prefer to write in Javascript, Scala and Python. I graduated from IIT Madras in Engineering Design. I currently work for LinkedIn, and live in Bangalore, India