Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by Reatom and Effector

@reffect/undoable

Extension for Reffect stores.
Provides undo/redo effects and store history.

How to use

Import undoable function from package:

import { undoable } from "@reffect/undoable";

Call undoable and send to it your store at first argument:

import { store } from "@reffect/core";
const storeRef = store({ foo: "bar" });
const { history, undo, redo } = undoable(storeRef, middlewares, limit);
// `middlewares` it is array of reffect store middlewares
// `limit` means limit for state history

undo (VoidFunction)

This function move state of wrapped store to the previous value

undo();

redo (VoidFunction)

This function move state of wrapped store to the next value (if undo() was called early)

redo();

history ({ past: Store[]; present: Store; future: Store[]; })

It's reffect store which have state history of wrapped store

import { manage } from "@reffect/core";

manage(history).subscribe((payload, prevState, currState) => console.log(payload, prevState, currState));

Examples

import { store, effect } from "@reffect/core";
import { undoable } from "@reffect/undoable";

const keyboards = store({ list: [] });
const { history, undo, redo } = undoable(keyboards);

const addKeyboard = effect(keyboards, name => ({ list: [...keyboards.list, name] }));

addKeyboard("Das Keyboard 4Q");
addKeyboard("Leopold FC900R");
addKeyboard("Leopold FC750R");

console.log(keyboards.list); // ["Das Keyboard 4Q", "Leopold FC900R", "Leopold FC750R"]
undo();
console.log(keyboards.list); // ["Das Keyboard 4Q", "Leopold FC900R"]
undo();
console.log(keyboards.list); // ["Das Keyboard 4Q"]
redo();
console.log(keyboards.list); // ["Das Keyboard 4Q", "Leopold FC900R"]
redo();
console.log(keyboards.list); // ["Das Keyboard 4Q", "Leopold FC900R", "Leopold FC750R"]

console.log(history);
/*
 {
   past: [
     {
       list: [],
     },
     {
       list: ["Das Keyboard 4Q"],
     },
     {
       list: ["Das Keyboard 4Q", "Leopold FC900R"],
     },
   ],
   present: {
     list: ["Das Keyboard 4Q", "Leopold FC900R", "Leopold FC750R"]
   },
   future: []
 }
*/