redux-undo
  • About
  • Main
    • FAQ
    • Examples
      • Undoing/redoing batches of actions at a time
      • Converting a regular reducer to undoable reducer
    • Upgrading to 1.0
    • Working with Typescript
Powered by GitBook
On this page
  • Table of Contents
  • Where can I get help using redux-undo?
  • Where can I find examples of how to use redux-undo?
  • How do I prevent cluttering up history with rapidly changing state?
  • Can I have multiple, separate undoable functions?
  • Why are my actions not being filtered?
  • What is _latestUnfiltered? Can I remove it?
  • What is it?
  • Can I remove it?
  • Why am I getting Cannot find module 'redux-undo'?

Was this helpful?

  1. Main

FAQ

PreviousAboutNextExamples

Last updated 4 years ago

Was this helpful?

Table of Contents

Where can I get help using redux-undo?

To get an understanding of the basics, read through the and checkout some .

To get help with a specific use case, see if there is already an example in these docs or the examples. If not, ask for help in the !

If it seems you have found a bug or you are itching for a new feature, go ahead and submit it as an issue following the template provided. Please reserve Github issues for bugs and features only. Ask any other questions on the gitter chat and someone will probably be able to help you with your problem.

Where can I find examples of how to use redux-undo?

Look at the examples/ directory of the project folder. The todos-with-undo/ is a good project to start messing with.

$ git clone https://github.com/omnidan/redux-undo.git
$ cd redux-undo/examples/todos-with-undo
$ npm install
$ npm start

How do I prevent cluttering up history with rapidly changing state?

The throttled-drag/ project found the examples/ directory gives a good demonstration of how to debounce undos (the filter is in util/undoFilter.js).

This general question has different solutions depending on your exact problem. Let's say you have one or more rapidly dispatched actions, for example MOVE_CURSOR and UPDATE_OBJECT_POS, that ends with a lone action PLACE_OBJECT, and you only want to record the end state after PLACE_OBJECT. Then you can simply use a filter excludeAction(['MOVE_CURSOR', 'UPDATE_OBJECT_POS'])

Can I have multiple, separate undoable functions?

Yes you can! Simply wrap each reducer with its own undoable().

const rootReducer = combineReducers({
  someData: undoable(dataReducer),
  otherData: undoable(otherDataReducer)
});

Do not forget to setup different undo/redo types to undo/redo each slice separately.

someData: undoable(dataReducer, {
  undoType: "DATA_UNDO",
  redoType: "DATA_REDO"
  // There is also jumpType, jumpToPastType, jumpToFutureType, clearHistoryType, and initTypes (which is an array of action types)
});

If you wish to have a single conglomerate history that a user can undo one action at a time, you can wrap the root reducer with undoable().

const rootReducer = undoable(
  combineReducers({
    someData: dataReducer,
    otherData: otherDataReducer
  }),
  {...options...}
);

Why are my actions not being filtered?

On the other hand, here is how to use the helper functions:

undoable(myReducer, {
  filter: combineFilters(
    // includeAction/excludeAction helpers take an array of action type strings
    includeAction(["MY_ACTION", "ANOTHER_ACTION"]),
    customFilter
  )
});

When writing a custom filter, return true for actions that you want to keep in history.

function onlyEveryThird(action, newState, history) {
  // Access the whole history object
  let { past, present, future, limit } = history;

  return newState.count % 3 === 0; // Only update history every third count
}

What is _latestUnfiltered? Can I remove it?

What is it?

State wrapped by undoable() contains the field _latestUnfiltered alongside past, present, etc. This field is used to keep track of state that should be put in the history but cannot yet because the previous action(s) were filtered. It is basically a temporary variable between filtered actions.

// This action is filtered, so present cannot be pushed into past right away
_latestUnfiltered = present;
present = newState;

// With the next unfiltered action...
past = [...past, _latestUnfiltered]; // Now we can add it

Can I remove it?

Short answer, no. It is an integral part of filtering actions from history and cannot be removed from the library. You can ignore it completely, but overriding/removing it may have unwanted consequences.

While there is a tad more overhead handling actions in the reducer, it is necessary with the current setup. In the future, there might be optimization that makes this field less burdensome for users that do not use the filtering functionality.

Why am I getting Cannot find module 'redux-undo'?

If you are using redux-undo in a CommonJS or UMD environment, you need to add .default to your imports.

// CJS
var undoable = require("redux-undo").default;

// UMD
var undoable = window.ReduxUndo.default;

ES6 imports should work without a hitch.

import undoable from "redux-undo";

Just open and you are good to go!

For more complex requirements, consider writing your own .

You probably need to use and/or to undo/redo in reasonable chunks.

If you are trying to prevent actions from changing state, that is not what filter is for. The filter option only prevents state changes from becoming part of the history, i.e. the new state being pushed into state.past. If you need this functionality, check out .

If this fixed your issue, you might also want to checkout how to .

http://localhost:3000
custom filter
custom filters
groupBy
redux-ignore
upgrade from 0.6 to 1.0
back to top
back to top
back to top
back to top
back to top
back to top
back to top
How do I upgrade from 0.X to 1.0?
How can I Undo or Redo a batch of actions at the same time ?
README
gitter chat
Where can I get help using redux-undo?
Where can I find examples of how to use redux-undo?
How do I prevent cluttering up history with rapidly changing state?
Can I have multiple, separate undoable functions?
Why are my actions not being filtered?
What is _latestUnfiltered? Can I remove it?
Why am I getting Cannot find module 'redux-undo'?
examples
How do I set an initial state/history?