Package Exports

redux-undo

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-undo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

redux undo/redo

simple undo/redo functionality for redux state containers

Protip: You can use the redux-undo-boilerplate to quickly get started with redux-undo.

Installation

npm install --save redux-undo

Making your reducers undoable

redux-undo is a reducer enhancer, it provides the undoable function, which takes an existing reducer and a configuration object and enhances your existing reducer with undo functionality.

Note: If you were accessing state.counter before, you have to access state.counter.currentState after wrapping your reducer with undoable.

To install, firstly import redux-undo:

// Redux utility functions
import { compose, createStore, applyMiddleware } from 'redux';
// Redux Undo store enhancer
import undoable from 'redux-undo';

Then, add undoable to your reducer(s) like this:

combineReducers({
  counter: undoable(counter)
})

A configuration can be passed like this:

combineReducers({
  counter: undoable(counter, {
    limit: 10 // set a limit for the history
  })
})

Usage

Firstly, import the undo/redo action creators:

import { ActionCreators } from 'redux-undo';

Then, you can use store.dispatch() and the undo/redo action creators to perform undo/redo operations on your state:

store.dispatch(ActionCreators.undo()) // undo the last action
store.dispatch(ActionCreators.redo()) // redo the last action

You can also specify a number of steps to go back/forth:

store.dispatch(ActionCreators.undo(3)) // undo 3 actions
store.dispatch(ActionCreators.redo(2)) // redo 2 actions

Configuration

A configuration object can be passed to undoable() like this (values shown are default values):

undoable({
  limit: false, // set to a number to turn on a limit for the history

  filter: () => true, // see `Filtering Actions` section

  undoType: ActionTypes.UNDO, // define a custom action type for this undo action
  redoType: ActionTypes.REDO, // define a custom action type for this redo action

  initialState: undefined, // initial state (e.g. for loading)
  initialHistory: { // initial history (e.g. for loading)
    past: [],
    present: config.initialState,
    future: [],
  },

  debug: false, // set to `true` to turn on debugging
})

Filtering Actions

If you don't want to include every action in the undo/redo history, you can pass a function to undoable like this:

undoable(function filterActions(action) {
  return action.type !== SOME_ACTION; // only undo/redo on SOME_ACTION
})

Or you can use the ifAction and excludeAction helpers, which should be imported like this:

import undoable, { ifAction, excludeAction } from 'redux-undo';

Now you can use the helper, which is pretty simple:

undoable({ filter: ifAction(SOME_ACTION) })
undoable({ filter: excludeAction(SOME_ACTION) })

... they even support Arrays:

undoable({ filter: ifAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable({ filter: excludeAction([SOME_ACTION, SOME_OTHER_ACTION]) })

Note that the helpers always accept @@redux/INIT too in order to store your initial state. If you don't want this, define your own filter function.

License

MIT, see LICENSE.md for more information.