Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including redux-undoable with all npm packages installed. Try it out:

var reduxUndoable = require("redux-undoable")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redux-undoable v1.0.2

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

Build Status codecov

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 Version npm Downloads

npm install redux-undoable

Prior Art

redux-undo npm Version npm Downloads

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 npm Version npm Downloads

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free