Facebook's Flux workflow uses a one-way data flow for building applications. Brandon Tilley released a simple implementation with Fluxxor, and this tutorial extends the Fluxxor Todo example to add undo and redo capabilities.

Approach

The undo-redo mechanism is built directly into Flux stores. Rather than wrapping stores or adding middleware, each store maintains its own history using Mori — a library that provides persistent immutable data structures for JavaScript. Mori lists store snapshots of the store state at each mutation point.

How It Works

Two Mori lists track history: an undo list and a redo list. When a state-changing action is dispatched, the current state is pushed onto the undo list and the redo list is cleared. An undo action pops the most recent state from the undo list, pushes the current state onto the redo list, and restores the popped state. Redo reverses this process.

Key Details

• Built on the Fluxxor Todo example, extending its existing store structure.
• Uses Mori lists for storing undo and redo state snapshots — these are persistent, immutable data structures that make history tracking efficient.
• Follows Facebook's one-way data flow pattern: actions → dispatcher → stores → views.
• Components remain unchanged; all undo-redo logic lives inside the stores.

A working demo and the full source code are available on Github.