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'
const todos = function(state = [], action) {
}
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 install redux-undoable
Prior Art
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 takes the same approach as redux-undoable by storing actions rather than state. It works in combination with the redux-smart-action middleware.