@@ -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+
1112You can install angular-redux2/sync using npm:
1213
1314``` bash
1415npm 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
2022To use ` @angular-redux2/undo ` in your Angular application, follow these steps:
2123Define 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
2528const 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
3640ngRedux .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+
3851Implement 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})
5670export 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