FAQ
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 gitter chat!
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.
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
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'])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...}
);
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 redux-ignore.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
}
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
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.
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";
Last modified 2yr ago