# recordable-redux

> Redux reducer enhancer that records state history

Latest version **1.0.0** (published 2020-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install recordable-redux
pnpm add recordable-redux
yarn add recordable-redux
bun add recordable-redux
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-03-22 |
| First published | 2020-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Peter Mills |
| Maintainers | ptlm500 |

## Links

- npm: https://www.npmjs.com/package/recordable-redux
- Repository: https://github.com/ptlm500/recordable-redux
- Homepage: https://github.com/ptlm500/recordable-redux#readme
- Issues: https://github.com/ptlm500/recordable-redux/issues
- npm.io page: https://npm.io/package/recordable-redux

## Dependencies (1)

- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12

## Recent versions

- 1.0.0 (latest) — 2020-03-22
- 0.1.0 — 2020-02-22

## README

# recordable-redux

[Redux](https://redux.js.org/) reducer enhancer that records state history. Inspired by the [Implementing Undo History](https://redux.js.org/recipes/implementing-undo-history/) recipe.

![CI](https://github.com/ptlm500/recordable-redux/workflows/CI/badge.svg)

## Installation

Using npm: `npm install recordable-redux`

Using yarn: `yarn install recordable-redux`

## Getting started

recordable-redux provides an enhancer for Redux reducers that records state history. By dispatching actions you can traverse recorded history,toggle the recording of state history and clear recorded history.

### Wrap your reducer

In your reducer file import the enhancer, and pass your reducer to it. In this example we will wrap a simple reducer with actions to increment and decrement a count. The state shape in this case might look like this:

```js
{
  count: 10
}
```

Below is an example of how we can wrap the counter reducer with the recordable enhancer:

```js
import recordable from 'recordable-redux';

// The reducer to be wrapped
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// Pass the reducer to the recordable enhancer
const counterWithHistory = recordable(counter);

export default counterWithHistory;
```

Thats it!

The enhancer will modify the state shape as follows (when converted from an [Immutable collection](https://immutable-js.github.io/immutable-js/docs/#/Map) to a JavaScript Object with [`toJS()`](https://immutable-js.github.io/immutable-js/docs/#/Map/toJS)):

```js
{
  count: {
    past: [],
    present: 10,
    future: [],
    recordingEnabled: true
  }
}
```

### Traversing recorded history

recordable-redux provides some default action types for controlling the enhancer. Import the action types from recordable-redux and define the [action creators](https://redux.js.org/basics/actions#action-creators) you require for your usecase:

```js
import { actionTypes as recordableActionTypes } from 'recordable-redux';

/**
 * Action to set the state back
 */
export function back() {
  return {type: recordableActionTypes.BACK};
}

/**
 * Action to set the state forward
 */
export function forward() {
  return {type: recordableActionTypes.FORWARD};
}

/**
 * Action to toggle recording
 */
export function toggleRecording() {
  return {type: recordableActionTypes.TOGGLE_RECORDING};
}

/**
 * Action to clear recorded state
 */
export function clearRecording() {
  return {type: recordableActionTypes.CLEAR_RECORDING};
}

```

#### Going back

To go back one step in state, dispatch the `back` action, as defined in your action creators.

```js
dispatch(back());
```

Given the following initial state:

```js
{
  count: {
    past: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    present: 10,
    future: [],
    recordingEnabled: true
  }
}
```

dispatching the `back` action will update the state accordingly:

```js
{
  count: {
    past: [1, 2, 3, 4, 5, 6, 7, 8],
    present: 9,
    future: [10],
    recordingEnabled: true
  }
}
```

> Note: If the `past` array is empty, dispatching `back` action will revert the state to its initial value.

#### Going forward

To go forward one step in state, dispatch the `forward` action, as defined in your action creators.

```js
dispatch(forward());
```

Given the following initial state:

```js
{
  count: {
    past: [1, 2, 3, 4, 5, 6, 7],
    present: 8,
    future: [9, 10],
    recordingEnabled: true
  }
}
```

dispatching the `forward` action will update the state accordingly:

```js
{
  count: {
    past: [1, 2, 3, 4, 5, 6, 7, 8],
    present: 9,
    future: [10],
    recordingEnabled: true
  }
}
```

> Note: If the `future` List is empty, dispatching `future` action will have no effect on the state.

### Toggling recording

By default, the recording of state history is enabled. To switch it on/off, you can dispatch the `toggleRecording` action, as defined above:

```js
dispatch(toggleRecording());
```

This will invert the value of `recordingEnabled`.

### Clearing recorded state

To clear recorded state you can dispatch the `clearRecording` as defined above:

```js
dispatch(clearRecording());
```

This will reset `past` and `future` Lists to empty Lists:

Before:

```js
{
  count: {
    past: [1, 2, 3, 4, 5, 6, 7],
    present: 8,
    future: [9, 10],
    recordingEnabled: true
  }
}
```

After `clearRecording`:

```js
{
  count: {
    past: [],
    present: 8,
    future: [],
    recordingEnabled: true
  }
}
```

---
_Source: https://npm.io/package/recordable-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._