redux-undoable

redux-undoable

A reducer enhancer (or higher order reducer) that provides undo/redo functionality for Redux by replaying actions (rather than storing previous state)

Basic Usage

redux-undoable exports a reducer enhancer; a function that takes a reducer, and returns a new reducer with some additional capability.

import undoable, { UNDO, REDO } from 'redux-undoable';
import { createStore } from 'redux'

// standard reducer function
const todos = function(state = [], action) {
  /* ... */
}

// enhanced (wrapped) reducer
const undoableTodos = undoable(todos);

const store = createStore(undoableTodos);

This will change your state tree from:

{
  "todos": []
}

To:

{
  "todos": {
    "initial": [],
    "past": [],
    "present": [],
    "future": []
  }
}

When you dispatch some actions:

store.dispatch({
  type: 'ADD_TODO',
  text: 'Do something'
});
store.dispatch({
  type: 'ADD_TODO',
  text: 'Do something else'
});

The state tree will change as follows:

{
  "todos": {
    "initial": [],
    "past": [
      { "type": "ADD_TODO", "text": "Do something" },
      { "type": "ADD_TODO", "text": "Do something else" }
    ],
    "present": [
      { "text": "Do something", "completed": false },
      { "text": "Do something else", "completed": false }
    ],
    "future": []
  }
}

You can then dispatch an UNDO action:

store.dispatch({ type: UNDO });

And the state tree will change as follows:

{
  "todos": {
    "initial": [],
    "past": [
      { "type": "ADD_TODO", "text": "Do something" }
    ],
    "present": [
      { "text": "Do something", "completed": false }
    ],
    "future": [
      { "type": "ADD_TODO", "text": "Do something else" }
    ]
  }
}

And then dispatch a REDO action:

store.dispatch({ type: REDO });

And the state tree will look like this:

{
  "todos": {
    "initial": [],
    "past": [
      { "type": "ADD_TODO", "text": "Do something" },
      { "type": "ADD_TODO", "text": "Do something else" }
    ],
    "present": [
      { "text": "Do something", "completed": false },
      { "type": "ADD_TODO", "text": "Do something else" }
    ],
    "future": []
  }
}

Rather than storing intermediate state, redux-undoable replays actions through the wrapped reducer from the initial state to arrive at the desired computed state, keeping track of your place in history by manipulating the past and present properties.

Installation

npm

npm install redux-undoable

Prior Art

redux-undo

redux-undo differs from redux-undoable in that it stores copies of the entire state tree in order to provide undo/redo functionality. redux-undoable takes a different approach whereby we store the actions and replay them in order to arrive at the desired state. This is more space efficient (assuming your state tree is larger than your actions), but less computationally efficient, particularly if there are any expensive operations in your reducer functions.

redux-undo-stack

redux-undo-stack takes the same approach as redux-undoable by storing actions rather than state. It works in combination with the redux-smart-action middleware.