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);

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]);

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>
    </>
  );
};

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>;

type config.key = String