https://github.com/andres-kovalev/undoable-reducer
Simple utility to make reducers undoable
https://github.com/andres-kovalev/undoable-reducer
redo-actions reducer undo undoable
Last synced: about 1 year ago
JSON representation
Simple utility to make reducers undoable
- Host: GitHub
- URL: https://github.com/andres-kovalev/undoable-reducer
- Owner: andres-kovalev
- License: mit
- Created: 2019-07-27T22:45:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-25T17:20:09.000Z (about 6 years ago)
- Last Synced: 2025-03-15T01:50:31.080Z (over 1 year ago)
- Topics: redo-actions, reducer, undo, undoable
- Language: JavaScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/andres-kovalev/undoable-reducer)
[](https://codecov.io/gh/andres-kovalev/undoable-reducer)
[](https://www.npmjs.com/package/undoable-reducer)
[](https://nodejs.org/)
[](https://www.npmjs.com/package/undoable-reducer)
[](https://github.com/andres-kovalev/undoable-reducer/blob/master/LICENSE)
[](https://www.npmjs.com/package/undoable-reducer)
# undoable-reducer
Simple utility to make reducers undoable.
# Description
`undoable-reducer` provides simple utility to make any reducer undoable.
Here is a small [demo](https://codesandbox.io/s/undoable-reducer-playground-xgqtn).
# Installation
As any other npm package `undoable-reducer` can be added to your project by following command:
```bash
npm i -S undoable-reducer
```
# API
## makeUndoable(reducer, options)
To make any reducer undoable just pass it to `makeUndoable()` function as 1st argument:
```js
import makeUndoable from 'undoable-reducer';
const reducer = (state, action) => {
...
};
export default makeUndoable(reducer);
```
To use undo/redo functionality, `undoable-reducer` exports action types for undo and redo actions:
```js
import { TYPES } from 'undoable-reducer';
const Component = ({ dispatch }) => {
...
dispatch({ type: TYPES.undo });
};
```
`undoable-reducer` exports action creators as well:
```js
import { ACTIONS } from 'undoable-reducer';
const Component = ({ dispatch }) => {
...
dispatch(ACTIONS.undo());
};
```
To use undo/redo functionality across several reducers `makeUndoable()` can be applied to combined reducer...
```js
import makeUndoable from 'undoable-reducer';
import combineReducers from 'redux';
import theme from './theme';
import locale from './locale';
import editor from './locale';
// to add undo/redo functionality to whole state
export default makeUndoable(combineReducers({
theme, locale, editor
}));
```
or any specific reducer:
```js
...
// to add undo/redo functionality editor state only
export default combineReducers({
theme, locale,
editor: makeUndoable(editor)
});
```
`makeUndoable()` function can be configured using `options` parameter.
In some cases we may want to use custom undo/redo actions. To do so we just need to pass undo and redo action types during `makeUndoable()` call:
```js
import { CUSTOM_UNDO as undo, CUSTOM_REDO as redo } from '../actions/editor';
export default makeUndoable(editorReducer, {
types: { undo, redo }
})
```
By doing so we can group several states under the same undo/redo history.
There is another option `length` to set maximum history length for undoable reducer (which is 10 by default):
```js
// use will be able to undo (and then redo) up to 20 times
export default makeUndoable(reducer, { length: 20 });
```