Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

redux-undoable

Package Overview
Dependencies
Maintainers
2
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-undoable

A reducer enhancer (or higher order reducer) that provides undo/redo functionality for Redux by replaying actions (rather than storing previous state)

  • 1.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

Build Status codecov

redux-undoable

A reducer enhancer (or higher order reducer) that provides undo/redo functionality for Redux by replaying actions (rather than storing previous state)

Basic Usage

redux-undoable exports a reducer enhancer; a function that takes a reducer, and returns a new reducer with some additional capability.

import undoable, { UNDO, REDO } from 'redux-undoable';
import { createStore } from 'redux'

// standard reducer function
const todos = function(state = [], action) {
  /* ... */
}

// enhanced (wrapped) reducer
const undoableTodos = undoable(todos);

const store = createStore(undoableTodos);

This will change your state tree from:

{
  "todos": []
}

To:

{
  "todos": {
    "initial": [],
    "past": [],
    "present": [],
    "future": []
  }
}

When you dispatch some actions:

store.dispatch({
  type: 'ADD_TODO',
  text: 'Do something'
});
store.dispatch({
  type: 'ADD_TODO',
  text: 'Do something else'
});

The state tree will change as follows:

{
  "todos": {
    "initial": [],
    "past": [
      { "type": "ADD_TODO", "text": "Do something" },
      { "type": "ADD_TODO", "text": "Do something else" }
    ],
    "present": [
      { "text": "Do something", "completed": false },
      { "text": "Do something else", "completed": false }
    ],
    "future": []
  }
}

You can then dispatch an UNDO action:

store.dispatch({ type: UNDO });

And the state tree will change as follows:

{
  "todos": {
    "initial": [],
    "past": [
      { "type": "ADD_TODO", "text": "Do something" }
    ],
    "present": [
      { "text": "Do something", "completed": false }
    ],
    "future": [
      { "type": "ADD_TODO", "text": "Do something else" }
    ]
  }
}

And then dispatch a REDO action:

store.dispatch({ type: REDO });

And the state tree will look like this:

{
  "todos": {
    "initial": [],
    "past": [
      { "type": "ADD_TODO", "text": "Do something" },
      { "type": "ADD_TODO", "text": "Do something else" }
    ],
    "present": [
      { "text": "Do something", "completed": false },
      { "type": "ADD_TODO", "text": "Do something else" }
    ],
    "future": []
  }
}

Rather than storing intermediate state, redux-undoable replays actions through the wrapped reducer from the initial state to arrive at the desired computed state, keeping track of your place in history by manipulating the past and present properties.

Installation

npm npm Version npm Downloads

npm install redux-undoable

Prior Art

redux-undo npm Version npm Downloads

redux-undo differs from redux-undoable in that it stores copies of the entire state tree in order to provide undo/redo functionality. redux-undoable takes a different approach whereby we store the actions and replay them in order to arrive at the desired state. This is more space efficient (assuming your state tree is larger than your actions), but less computationally efficient, particularly if there are any expensive operations in your reducer functions.

redux-undo-stack npm Version npm Downloads

redux-undo-stack takes the same approach as redux-undoable by storing actions rather than state. It works in combination with the redux-smart-action middleware.

Keywords

FAQs

Package last updated on 22 Aug 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc