Middleware Hooks

useUndoRedo

useUndoRedo

useUndoRedo adds the ability to traverse to past or future states. Undo and redo logic is handled by the hook itself. Dispatch the respective action in order to traverse the state.

Note: This reducer does not return an array of values. But instead return objects.

Usage

import { useUndoRedo, undoAction, redoAction } from 'middleware-hooks';
/**
 * store: Working state of the reducer.
 * hasFuture: If any future state exists.
 * hasPast: If any past state exists.
 * dispatch: Dispatch function.
 */
const App = () => {
  const { store, hasFuture, hasPast, dispatch } = useUndoRedo(
    reducer,
    initialState
  );
  return (
    <>
      <h1>Hello World!</h1>
      <button>Undo</button>
      <button>Redo</button>
    </>
  );
};

Example

Edit this page on GitHub

Prev

Introduction

Next

useLogger

On this page