Easy history management for React with Mlyn

In the introduction to mlyn post, I've shown an example of how easy is to create a TodoMVC app within it. In this post, I'd like to demonstrate how 2-way binding can help to setup history management. This is how the app would look like:

You can see full code on this codesandbox
The thing we want to track is todos field of the store:

const state$ = useSubject({
  todos: [],
  newTitle: ""
});

Since all parts of a mlyn store are 2-way bindable, we can easily pass it to the tracking function:

const [history] = createHistory(state$.todos);

createHistory is an utility from mlyn-history package. Within the returned history object we can jump to any step of the tracked state. Lets write a component for that:

const History = seal(({ history }) => {
  // let store past and future to local storage.
  useSyncronize(history.past$, "past");
  useSyncronize(history.future$, "future");
  return (
    <>
      <Mlyn.Input
        type="range"
        step="1"
        onChange={(e) => {
          // on input change, jump to a point in history
          history.jumpTo(e.target.value);
        }}
        // subscribe component to history position.
        value$={() => history.past$().length}
        // the range of mutations, indexing starts from 1
        // cause 0 is the initial state which can't be rolled back
        min={1}
        max$={() => history.entries$().length}
        // history with one entry (actual state)
        // is empty, hence can't be modified
        disabled$={() => history.entries$().length === 1}
      />
      <button onClick={history.commit}>COMMIT</button>
    </>
  );
});

And that's it, now every step of the todos state can be easily inspected. I hope the above has convinced you in the power of 2-way binding.

Blog

Easy history management for React with Mlyn

vaukalak

Join Our Newsletter. No Spam, Only the good stuff.

Related