redux-undone


$3

Undo & Redo for complex redux workflows.

$3

``
npm install --save redux-undone
`

$3

This library is implemented as a redux middleware. When setting up your redux
store, you create the middleware for redux-undone by passing in your
transformers.

`
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { reducers, transformers } from './modules';
import undone from 'redux-undone';

export default () => {
const rootReducer = combineReducers(reducers);
const middleware = [undone.createMiddleware(transformers)];

return createStore(
rootReducer,
applyMiddleware(...middleware)
);
};
`

Transformers is an object with a property for each undo-able action type. If you
do not include a transformer for an action type, it is ignored by redux-undone
(opt-in). A transformer is a function that is passed three parameters: the
state before before the original action was dispatched, the state after the
original action was dispatched, and the original action itself. The function
must return either a thunk or an action, which represents the transformation
from the original action.

`
...
{
[ADD_TODO]: (action, prevState, nextState, undoing) => {
const { value } = action.payload;
return attemptRemoveTodo(value);
},
[REMOVE_TODO]: (action, prevState, nextState, undoing) => {
const { payload } = action;
const { value, done } = getTodo(prevState, payload);
return attemptAddTodo({ value, done, index: payload });
},
}
...
`

Now all you need to do is make use of the provided action creators.

`
import { undo, redo } from 'redux-undone';
...
store.dispatch(undo());
...
store.dispatch(redo());
...
`

See example for complete usage.

$3

If you are using redux-thunk`, you can continue to do so, but it is unnecessary, because this library also handles thunks.