Skip to content

Instantly share code, notes, and snippets.

@johanquiroga
Last active June 2, 2023 14:55
  • Star 13 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Undo/Redo capability for any reducer using react hook `useReducer`
import { useReducer } from 'react';
const useUndoReducer = (reducer, initialState) => {
const undoState = {
past: [],
present: initialState,
future: []
};
const undoReducer = (state, action) => {
const newPresent = reducer(state.present, action);
if (action.type === useUndoReducer.types.undo) {
const [newPresent, ...past] = state.past;
return {
past,
present: newPresent,
future: [state.present, ...state.future]
};
}
if (action.type === useUndoReducer.types.redo) {
const [newPresent, ...future] = state.future;
return {
past: [state.present, ...state.past],
present: newPresent,
future
};
}
return {
past: [state.present, ...state.past],
present: newPresent,
future: []
};
};
return useReducer(undoReducer, undoState);
};
useUndoReducer.types = {
undo: 'UNDO',
redo: 'REDO'
};
export default useUndoReducer;
// Example
/* import React, { useReducer } from "react";
import useUndoReducer from "./useUndoReducer";
const initialState = {}
const reducer = (state = initialState, action) => {
// Your reducer
return state;
};
const YourComponent = (props) => {
const [state, dispatch] = useUndoReducer(reducer, initialState);
// Some actions
const someAction = useCallback(
(payload) => {
dispatch({
type: 'SOME_ACTION',
payload,
});
},
[dispatch]
);
// Undo/Redo actions
const undo = useCallback(() => {
dispatch({ type: useUndoReducer.types.undo });
}, [dispatch]);
const redo = useCallback(() => {
dispatch({ type: useUndoReducer.types.redo });
}, [dispatch]);
// render or do something something
// ...
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment