Undoable Reducer react hooks #react #hook

useUndoReducer.ts

function useUndoReducer<State, Action>(
  reducer: (state: State, action: Action) => State,
  initial: () => State[]
) {
  const [index, setIndex] = useState(0);
  const [history, setHistory] = useState(initial);
  const state = history[index];
  const dispatch = useCallback(
    (action: Action) => {
      const updated = history.slice(0, index + 1);
      updated.push(reducer(state, action));
      setHistory(updated);
      setIndex(index + 1);
    },
    [index, state, history]
  );
  const undo = useCallback(() => {
    if (index > 0) {
      setIndex(index - 1);
    }
  }, [index]);
  const redo = useCallback(() => {
    if (index < history.length - 1) {
      setIndex(index + 1);
    }
  }, [index, history]);
  return [state, dispatch, undo, redo, history, setIndex] as const;
}