History

@syncstate/history is a SyncState plugin which provides Undo and Redo functionality out of the box.

Installation

# NPM

npm install @syncstate/history --save

# Yarn

yarn add @syncstate/history

Basic usage

import { createDocStore } from "@syncstate/syncstate";

import history from "@syncstate/history";

const store = createDocStore({ todos: [], filter: "all" }, [

history.createInitializer(),

]);

// Undo last applied JSON patch

store.dispatch(history.undo());

// Redo next JSON patch from redo stack

store.dispatch(history.redo());

Breakpoints

You have the option of inserting breakpoints in the history using which you can undo till a specific point in state.

// User actions before breakpoint

store.dispatch(history.insertUndoBreakpoint());

// User actions after breakpoint

// This will undo all actions after breakpoint

store.dispatch(history.undoTillBreakpoint());

// This will redo all actions after breakpoint

store.dispatch(history.redoTillBreakpoint());

Advanced

By default, this plugin will automatically work for the root document which means any change to the document is recorded and performing undo or redo actions will work with those changes.

If you want to maintain separate undo/redo stack for different parts of the document, you can use history.enable for a path inside document.

store.dispatch(history.enable("/todos"));

store.dispatch(history.undoPath("/todos"));

store.dispatch(history.redoPath("/todos"));

store.dispatch(history.insertUndoBreakpoint("/todos"));

store.dispatch(history.undoPathTillBreakpoint("/todos"));

store.dispatch(history.redoPathTillBreakpoint("/todos"));

How it works

• SyncState stores inversePatches which means the opposite of patches generated against user actions. An inversePatch can be applied to reverse the operation of a corresponding patch.
• SyncState history plugin adds a middleware to SyncState's internal Redux store and listens to changes and stores patches and inversePatches in an undo stack. It also maintains a redo stack.
• To Undo and Redo, it simply picks up the patches from Undo and Redo stacks and applied them to SyncState store.

Differences with redux-undo

• It doesn't replace with the entire snapshot of the app. Instead it applies a patch on the document from the Undo / Redo stack.