Skip to content

Commit c6324e8

Browse files
committed
README: update
1 parent c29bc90 commit c6324e8

File tree

1 file changed

+64
-5
lines changed

1 file changed

+64
-5
lines changed

README.md

Lines changed: 64 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,21 @@ management using Redux.
88
[![downloads per month](https://img.shields.io/npm/dm/@angular-redux2/undo.svg)](https://www.npmjs.com/package/@angular-redux2/undo)
99

1010
## Installation
11+
1112
You can install angular-redux2/sync using npm:
1213

1314
```bash
1415
npm install @angular-redux2/undo
1516
```
1617

1718
## Usage
18-
- Take me to the [API docs](https://angular-redux2.github.io/undo).
19+
20+
> Take me to the [API docs](https://angular-redux2.github.io/undo).
1921
2022
To use `@angular-redux2/undo` in your Angular application, follow these steps:
2123
Define a StateWatchMap object that maps the properties you want to track for undo/redo operations to their corresponding
22-
state paths and configure the undo middleware in your Angular-Redux2/store setup by including it in the list of middleware:
24+
state paths and configure the undo middleware in your Angular-Redux2/store setup by including it in the list of
25+
middleware:
2326

2427
```typescript
2528
const middleware: Array<Middleware> = [
@@ -28,15 +31,26 @@ const middleware: Array<Middleware> = [
2831
path: 'path.to.property1'
2932
},
3033
propertyName2: {
31-
path: 'path.to.property2'
34+
path: 'path.to.property2',
35+
limit: 5
3236
},
3337
}),
3438
];
3539

3640
ngRedux.configureStore(rootReducer, {}, middleware, enhancer);
3741
```
42+
43+
settings:
44+
45+
- `path` (required): The path to the property in the state object using dot notation.
46+
- `filter` (optional): A filter function that determines if the property should be watched for undo/redo. Return true to
47+
include the property, and false to exclude it. If not specified, all properties are included.
48+
- `limit` (optional): The maximum number of past snapshots to keep in the undo history. If the limit is reached, the
49+
oldest snapshots are discarded. If not specified, no limit is applied.
50+
3851
Implement the undo/redo functionality in your Angular component or service.
39-
You can use the `undo`, `redo`, `jump`, and `clear_history` methods provided by `NgUndoStateActions` to perform the corresponding actions:
52+
You can use the `undo`, `redo`, `jump`, and `clear_history` methods provided by `NgUndoStateActions` to perform the
53+
corresponding actions:
4054

4155
```typescript
4256
// Example component
@@ -54,7 +68,8 @@ import { undo, redo, jump, clear_history } from '@angular-redux2/undo';
5468
`
5569
})
5670
export class ExampleComponent {
57-
constructor(private undoStateActions: NgUndoStateActions) {}
71+
constructor(private undoStateActions: NgUndoStateActions) {
72+
}
5873

5974
@Dispatch
6075
onUndo() {
@@ -77,3 +92,47 @@ export class ExampleComponent {
7792
}
7893
}
7994
```
95+
96+
## State Watch Map
97+
98+
The state watch map is an object that defines the paths to the state properties you want to track for undo. It has the
99+
following structure:
100+
101+
```typescript
102+
export interface StateWatchMap {
103+
[key: string]: {
104+
path: string;
105+
filter?: (action: any, currentState: any, snapshot: any) => boolean;
106+
limit?: number;
107+
}
108+
}
109+
```
110+
111+
- `key` (string): The unique identifier for the state property.
112+
- `path` (string): The dot-separated path to the state property.
113+
- `filter` (optional function): A filter function that determines if an action should be captured in the undo history
114+
for the specific state property.
115+
116+
## Custom Filters
117+
118+
You can define custom filter functions to control which actions are captured in the undo history for each state
119+
property.
120+
The filter function takes three parameters:
121+
122+
- `action`: The dispatched action object.
123+
- `currentState`: The current store state object.
124+
- `snapshot`: The snapshot to insert into the history.
125+
126+
The filter function should return true if the action should be captured, or false otherwise.
127+
Here's an example of a custom filter function that only captures actions with specific types:
128+
129+
```typescript
130+
const stateWatchMap: StateWatchMap = {
131+
'todos': {
132+
path: 'todos',
133+
filter: (action: any, currentState: any, snapshot: any): boolean => {
134+
return action.type === 'ADD_TODO' || action.type === 'REMOVE_TODO';
135+
}
136+
}
137+
};
138+
```

0 commit comments

Comments
 (0)