Tiny module for Storeon which is adding undo functionality to your state. This means that now you can undoing or redoing the events in the state.
It is just 377 bytes module (it uses Size Limit to control the size) without any dependencies.
import { undoable, UNDO, REDO } from "@storeon/undo/full";
const store = createStore([
/* all your modules */
undoable,
]);
// now you can use UNDO and REDO with dispatch
dispatch(UNDO);
npm install @storeon/undo
# or
yarn add @storeon/undo
If you need to support IE, you need to compile node_modules
with Babel.
You can use this module in two ways:
- store history for all state
- store history only for specific keys
To using the undo/redo functionality you just need to add the undoable
module to createStore
.
import { createStoreon } from "storeon";
import { undoable, UNDO, REDO } from "@storeon/undo/full";
let counter = (store) => {
store.on("@init", () => ({ counter: 0 }));
store.on("inc", (state) => ({ counter: state.counter 1 }));
store.on("dec", (state) => ({ counter: state.counter - 1 }));
};
const store = createStoreon([counter, undoable]);
And now you can use the functions undo
and redo
to manipulate the history.
const Counter = () => {
const { dispatch, counter } = useStoreon("counter");
return (
<React.Fragment>
<div>{counter}</div>
<button onClick={() => dispatch("inc")}>Inc</button>
<button onClick={() => dispatch("dec")}>Dec</button>
</React.Fragment>
);
};
const UndoRedo = () => {
const { dispatch } = useStoreon();
return (
<>
<button onClick={() => dispatch(UNDO)}>Undo</button>
<button onClick={() => dispatch(REDO)}>Redo</button>
</>
);
};
If you need history only for some particular keys in state you can use createHistory
function:
import { createHistory } from "@storeon/undo";
// history will be collect only for key `a`
const history = createHistory(["a"]);
const { UNDO, REDO } = history;
createStore([
/* all your modules */
history.module,
]);
// to change the history use the UNDO and REDO from `history` object
dispatch(UNDO);
type paths = Array<String>;
The keys of state object that will be stored in history
type config.key = String
The default state key for storing history, when omitted:
- if
paths
is not empty will be generated based onpaths
content - otherwise will default to
'undoable'
MIT
This module based on Implementing Undo History recipe article.