redux-undo-redo

An undo redo package for redux

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.

Installation

npm install @intactile/redux-undo-redo

or

yarn add @intactile/redux-undo-redo

Configuration

This package is configured with a set of reverting actions:

import counter, {
  increment,
  decrement,
  setValue,
  INCREMENT,
  DECREMENT,
  SET_COUNTER_VALUE
} from "./counterReduxModule";

const revertingActions = {
  [INCREMENT]: () => decrement(),
  [DECREMENT]: () => increment(),
  [SET_COUNTER_VALUE]: {
    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 {
  createUndoReducer,
  createUndoMiddleware
} from "@intactile/redux-undo-redo";

const undoMiddleware = createUndoMiddleware({ revertingActions });
const undoHistory = : createUndoReducer();
const store = createStore(
  combineReducers({ counter, undoHistory }), // add the reducer
  initialState,
  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
});

Usage

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

store.dispatch(
  actions.group(dispatch => {
    dispatch(increment());
    dispatch(increment());
    dispatch(increment());
  })
); // 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.

[ADD_VALUE]: {
  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