redux-immutable-undo-tree's Introduction

redux-immutable-undo-tree

Powerful undo tree with Immutable.js data structures modeled after VIM's undo tree, powered by diff/patch changesets.

Work in progress!!!

Uses:

immutablediff (to create patches for Immutable.js structures)
immutablepatch (to apply patches to Immutable.js structures

Sounds cool, show me how it works:


  Under the hood, the whole undo tree is stored as an Immutable.js tree. Just like VIM,
  we store changes in series in a 'branch'. We track these changes by wrapping your
  reducer in our own state-tracking function. You can apply certain undo tree traversals
  via our action creators.

    │    ┌┐                                     ┌┐
    │    └┤                                     └┤───┐   │
    │    ┌┤                                     ┌┤  ┌┤   │
    │    └┤                                  ┌──└┤  └│   │
    │    ┌┤                                 ┌┤  ┌┤  ┌┤   │
    │    └┤                                 └▼  └┤  └┤   │
         ┌┤       At any point in time,     ┌┤  ┌┤  ┌┤   │
  time   └┤         we can jump to an       └┤  └┤  └▼
         ┌┤           earlier state.        ┌┤  ┌┤     time
    │    └┤                                 └┤  └┤
    │    ┌┤                                 ┌┤  ┌┤       │
    │    └┤                                 └┤  └┤       │
    │    ┌┤                                 ┌┤  ┌┤       │
    │    └┤                                 └┤  └┤       │
    │    ┌┤                                 ┌┤  ┌┤       │
    ▼    └▼                                 └▼  └▼       │
                                                         ▼


  How do I use it?
  - Wrap your reducer that manages the state tree that you wish to
    have undo functionality for.
  - Apply the undo-tree middleware.
  - Profit! Use built-in action creators for tree traversal.

Example

import { undoable, actionCreators } from 'redux-immutable-undo-tree'
import { createStore, compose, combineReducers, applyMiddleware } from 'redux'

const initialState = {};
const identityReducer = (a) => a;
const rootReducer = combineReducers({
  data: undoable(identityReducer)
})

const store = createStore(
  rootReducer,
  initialState
)

// Go back in time 2 hours ago
store.dispatch(actionCreators.timeSubtract(2, 'hours'))

// Go forwards in time 2 hours
store.dispatch(actionCreators.timeAdd(2, 'hours'))

redux-immutable-undo-tree's People

Contributors

Stargazers

Watchers

redux-immutable-undo-tree's Issues

Tree Traversal

Need to figure out how to traverse the tree:

~~For getting all paths and nodes while iterating~~
For nodes between two nodes.

State Snapshots at the HEAD of branches

In the event I can't implement #1, the next thing would to save a snapshot of the state at the head of each branch. Then you can apply patches to get to a future state.