An undo redo package for redux


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Jul 26, 2018Jul 4, 2018Minified + gzip package size for @intactile/redux-undo-redo in KB



An undo redo package for redux

Build Status Maintainability Test Coverage

This package is heavily inspired by the undo/redo package developed by PowToon.

This package adds an undo redo history to a redux state. For each undoable action, you have to provide its reverting action. It supports also grouped actions which lets you undo a set of actions in one step.


npm install @intactile/redux-undo-redo


yarn add @intactile/redux-undo-redo


This package is configured with a set of reverting actions:

import counter, {
} from "./counterReduxModule";

const revertingActions = {
  [INCREMENT]: () => decrement(),
  [DECREMENT]: () => increment(),
    action: (action, { val }) => setValue(val),
    createArgs: (state, action) => ({ val: state.counter })

Reverting actions

This is a map between the action type and it's reverting action creator, the action creator gets the original action and should return the reverting action. If the the original action is not enough to create a reverting action you can provide createArgs that will result in an args argument for the reverting action:

  action: (action, args) => revertingActionCreator(action.something, args.somethingElse),
  createArgs: (state, action) => ({somethingElse: state.something}),
  groupWithPrevious: (action, previousAction) => action.type === previousAction.type

the createArgs function runs before the action happens and collects information needed to revert the action. you get this as a second argument for the reverting action creator. the optional groupWithPrevious function allows to group an action with the previous one.

Middleware and reducer

These reverting actions are supplied to a middleware registered with a reducer on the redux store.

import { createStore, combineReducers, applyMiddleware } from "redux";
import {
} from "@intactile/redux-undo-redo";

const undoMiddleware = createUndoMiddleware({ revertingActions });
const undoHistory = : createUndoReducer();
const store = createStore(
  combineReducers({ counter, undoHistory }), // add the reducer
  applyMiddleware(thunk) // add the middleware

History size

The undo and the redo histories are limited to respectively 50 and 10 by default. They can be increased or decreased when the reducer is created:

const undoHistory = createUndoReducer({
  undoHistorySize: 200,
  redoHistorySize: 100


Undo/redo actions

import { actions, selectors } from "@intactile/redux-undo-redo";
import { increment, decrement, setValue } from "./counterReduxModule";

store.dispatch(increment()); // counter = 1
store.dispatch(increment()); // counter = 2
console.log(selectors.canUndo(store.getState())); // true

store.dispatch(actions.undo()); // counter = 1
console.log(selectors.canRedo(store.getState())); // true

store.dispatch(actions.redo()); // counter = 2

Undo/redo group of actions

store.dispatch(actions.group(increment(), increment(), increment())); // counter = 3

store.dispatch(actions.undo()); // counter = 0
store.dispatch(actions.redo()); // counter = 3

Undo/redo group of actions with redux-thunk

  actions.group(dispatch => {
); // counter = 3

store.dispatch(actions.undo()); // counter = 0
store.dispatch(actions.redo()); // counter = 3

Group automatically successive actions

It is possible to group an action with the previous one. The reverting action should be configured with a new function.

  action: action => removeValue(action.payload),
  groupWithPrevious: (action, previousAction) => action.type === previousAction.type

If the previous action have the same type, the actions will be automatically grouped.

store.dispatch(addValue(1)); // counter = 1
store.dispatch(addValue(2)); // counter = 3
store.dispatch(addValue(3)); // counter = 6

store.dispatch(actions.undo()); // counter = 0
store.dispatch(actions.redo()); // counter = 6

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.