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

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]

I am a graduate of IIT Madras with degrees in Engineering Design and Biomedical Design. I write a lot of code. I like to travel around, and will do anything for good food. I watch a lot of football and play a little too. I am also interested in architecture, linguistics and cities among other things. You can follow me on Twitter at @ameyakarve or write to me at ameyakarve [at] gmail [dot] com . You can look at some of my code on my Github.