@@ -8,18 +8,21 @@ management using Redux.
8
8
[ ![ downloads per month] ( https://img.shields.io/npm/dm/@angular-redux2/undo.svg )] ( https://www.npmjs.com/package/@angular-redux2/undo )
9
9
10
10
## Installation
11
+
11
12
You can install angular-redux2/sync using npm:
12
13
13
14
``` bash
14
15
npm install @angular-redux2/undo
15
16
```
16
17
17
18
## 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 ) .
19
21
20
22
To use ` @angular-redux2/undo ` in your Angular application, follow these steps:
21
23
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:
23
26
24
27
``` typescript
25
28
const middleware: Array <Middleware > = [
@@ -28,15 +31,26 @@ const middleware: Array<Middleware> = [
28
31
path: ' path.to.property1'
29
32
},
30
33
propertyName2: {
31
- path: ' path.to.property2'
34
+ path: ' path.to.property2' ,
35
+ limit: 5
32
36
},
33
37
}),
34
38
];
35
39
36
40
ngRedux .configureStore (rootReducer , {}, middleware , enhancer );
37
41
```
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
+
38
51
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:
40
54
41
55
``` typescript
42
56
// Example component
@@ -54,7 +68,8 @@ import { undo, redo, jump, clear_history } from '@angular-redux2/undo';
54
68
`
55
69
})
56
70
export class ExampleComponent {
57
- constructor (private undoStateActions : NgUndoStateActions ) {}
71
+ constructor (private undoStateActions : NgUndoStateActions ) {
72
+ }
58
73
59
74
@Dispatch
60
75
onUndo() {
@@ -77,3 +92,47 @@ export class ExampleComponent {
77
92
}
78
93
}
79
94
```
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