Skip to content

Commit

Permalink
Merge pull request #53 from omnidan/v1.0.0-fixes
Browse files Browse the repository at this point in the history
beta4
  • Loading branch information
omnidan committed Mar 24, 2016
2 parents 5b48578 + 7428fc3 commit e140669
Show file tree
Hide file tree
Showing 4 changed files with 546 additions and 179 deletions.
114 changes: 77 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ _simple undo/redo functionality for redux state containers_

**Switching from 0.x to 1.0 (beta):** Make sure to update your programs to the [latest History API](#history-api).

---

## Installation
**This README is about the new 1.0-beta branch of redux-undo, if you are using
or plan on using 0.6, check out [the `0.6` branch](https://github.com/omnidan/redux-undo/tree/0.6)**

```
npm install --save redux-undo
```
---

Or you can install the beta:

## Installation

```
npm install --save redux-undo@beta
Expand Down Expand Up @@ -102,10 +103,13 @@ perform undo/redo operations on your state:
store.dispatch(ActionCreators.undo()) // undo the last action
store.dispatch(ActionCreators.redo()) // redo the last action

store.dispatch(ActionCreators.jump(-2)) // undo 2 steps
store.dispatch(ActionCreators.jump(5)) // redo 5 steps

store.dispatch(ActionCreators.jumpToPast(index)) // jump to requested index in the past[] array
store.dispatch(ActionCreators.jumpToFuture(index)) // jump to requested index in the future[] array

store.dispatch(ActionCreators.clearHistory()) // Remove all items from past[] and future[] arrays
store.dispatch(ActionCreators.clearHistory()) // [beta only] Remove all items from past[] and future[] arrays
```


Expand All @@ -123,18 +127,14 @@ undoable(reducer, {
undoType: ActionTypes.UNDO, // define a custom action type for this undo action
redoType: ActionTypes.REDO, // define a custom action type for this redo action

jumpType: ActionTypes.JUMP, // define custom action type for this jump action

jumpToPastType: ActionTypes.JUMP_TO_PAST, // define custom action type for this jumpToPast action
jumpToFutureType: ActionTypes.JUMP_TO_FUTURE, // define custom action type for this jumpToFuture action

clearHistoryType: ActionTypes.CLEAR_HISTORY, // define custom action type for this clearHistory action
clearHistoryType: ActionTypes.CLEAR_HISTORY, // [beta only] define custom action type for this clearHistory action

initialState: undefined, // initial state (e.g. for loading)
initTypes: ['@@redux/INIT', '@@INIT'] // history will be (re)set upon init action type
initialHistory: { // initial history (e.g. for loading)
past: [],
present: config.initialState,
future: []
},
initTypes: ['@@redux-undo/INIT'] // history will be (re)set upon init action type

debug: false, // set to `true` to turn on debugging
})
Expand All @@ -143,50 +143,90 @@ undoable(reducer, {
**Note:** If you want to use just the `initTypes` functionality, but not import
the whole redux-undo library, use [redux-recycle](https://github.com/omnidan/redux-recycle)!

### Filtering Actions
#### Initial State and History

If you don't want to include every action in the undo/redo history, you can
pass a function to `undoable` like this:
You can use your redux store to set an initial history for your undoable reducers:

```js
undoable(reducer, {
filter: function filterActions(action, currentState, previousState) {
return action.type === SOME_ACTION; // only add to history if action is SOME_ACTION
}
})

// or you could do...
import { createStore } from 'redux';

const initialHistory = {
past: [0, 1, 2, 3],
present: 4,
future: [5, 6, 7]
}

const store = createStore(undoable(counter), initialHistory);

```

Or just set the current state like you're used to with Redux. Redux-undo will create the history for you:

```js

import { createStore } from 'redux';

const store = createStore(undoable(counter), {foo: 'bar'});

// will make the state look like this:
{
past: [],
present: {foo: 'bar'},
future: []
}

undoable(reducer, {
filter: function filterState(action, currentState, previousState) {
return currentState !== previousState; // only add to history if state changed
}
})
```

Or you can use the `distinctState`, `includeAction` and `excludeAction` helpers,
which should be imported like this:
### Filtering Actions

If you don't want to include every action in the undo/redo history, you can
add a `filter` function to `undoable`. `redux-undo` provides you with the
`includeAction` and `excludeAction` helpers for basic filtering.

They should be imported like this:

```js
import undoable, { distinctState, includeAction, excludeAction } from 'redux-undo';
import undoable, { includeAction, excludeAction } from 'redux-undo';
```

Now you can use the helper, which is pretty simple:
Now you can use the helper functions:

```js
undoable(reducer, { filter: includeAction(SOME_ACTION) })
undoable(reducer, { filter: excludeAction(SOME_ACTION) })

// or you could do...
// they even support Arrays:

undoable(reducer, { filter: distinctState() })
undoable(reducer, { filter: includeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable(reducer, { filter: excludeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
```

... they even support Arrays:
**Note:** Since [`beta4`](https://github.com/omnidan/redux-undo/releases/tag/beta4),
only actions resulting in a new state are recorded. This means the
(now deprecated) `distinctState()` filter is auto-applied.

#### Custom filters

If you want to create your own filter, pass in a function with the signature
`(action, currentState, previousHistory)`. For example:

```js
undoable(reducer, { filter: includeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable(reducer, { filter: excludeAction([SOME_ACTION, SOME_OTHER_ACTION]) })
undoable(reducer, {
filter: function filterActions(action, currentState, previousHistory) {
return action.type === SOME_ACTION; // only add to history if action is SOME_ACTION
}
})

// The entire `history` state is available to your filter, so you can make
// decisions based on past or future states:

undoable(reducer, {
filter: function filterState(action, currentState, previousHistory) {
let { past, present, future } = previousHistory;
return future.length === 0; // only add to history if future is empty
}
})
```

### Ignoring Actions
Expand Down
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
{
"name": "redux-undo",
"version": "1.0.0-beta3",
"version": "1.0.0-beta4",
"description": "simple undo/redo functionality for redux state containers",
"main": "lib/index.js",
"scripts": {
"clean": "./node_modules/.bin/rimraf lib",
"compile": "./node_modules/.bin/babel src --out-dir lib",
"lint": "./node_modules/.bin/eslint src test",
"test": "NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --recursive",
"test:watch": "NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --recursive --watch",
"test:cov": "./node_modules/.bin/babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
"test": "NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register",
"test:watch": "npm run test -- --watch",
"test:bail": "npm run test:watch -- --bail",
"test:cov": "./node_modules/.bin/babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha",
"prepublish": "npm run lint && npm run test && npm run clean && npm run compile"
},
"repository": {
Expand Down
Loading

0 comments on commit e140669

Please sign in to comment.