{"id":28238328,"url":"https://github.com/angular-redux2/undo","last_synced_at":"2025-06-17T09:33:39.831Z","repository":{"id":154010270,"uuid":"628359920","full_name":"angular-redux2/undo","owner":"angular-redux2","description":"Undo and redo redux action","archived":false,"fork":false,"pushed_at":"2023-05-12T18:37:42.000Z","size":222,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-11T01:40:27.384Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-redux2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-04-15T17:47:31.000Z","updated_at":"2023-05-12T15:00:49.000Z","dependencies_parsed_at":"2024-01-05T06:47:02.467Z","dependency_job_id":null,"html_url":"https://github.com/angular-redux2/undo","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"7cdd9891768447becebe7a7d37e981084d149a4c"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/angular-redux2/undo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux2%2Fundo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux2%2Fundo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux2%2Fundo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux2%2Fundo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-redux2","download_url":"https://codeload.github.com/angular-redux2/undo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-redux2%2Fundo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260328884,"owners_count":22992786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-19T01:12:45.255Z","updated_at":"2025-06-17T09:33:39.802Z","avatar_url":"https://github.com/angular-redux2.png","language":"TypeScript","readme":"# angular-redux2/undo\n\n`@angular-redux2/undo` is an @angular-redux2/store package that provides undo and redo functionality for state\nmanagement using Redux.\n\n[![Discord](https://img.shields.io/discord/1050521693795405874?logo=Angular-redux2)](https://discord.com/invite/7BnsAqst6W)\n[![npm version](https://img.shields.io/npm/v/@angular-redux2/undo.svg)](https://www.npmjs.com/package/@angular-redux2/undo)\n[![downloads per month](https://img.shields.io/npm/dm/@angular-redux2/undo.svg)](https://www.npmjs.com/package/@angular-redux2/undo)\n\n## Installation\n\nYou can install angular-redux2/sync using npm:\n\n```bash\nnpm install @angular-redux2/undo\n```\n\n## Usage\n\n\u003e Take me to the [API docs](https://angular-redux2.github.io/undo).\n\nTo use `@angular-redux2/undo` in your Angular application, follow these steps:\nDefine a StateWatchMap object that maps the properties you want to track for undo/redo operations to their corresponding\nstate paths and configure the undo middleware in your Angular-Redux2/store setup by including it in the list of\nmiddleware:\n\n```typescript\nconst middleware: Array\u003cMiddleware\u003e = [\n    ngUndoMiddleware({\n        propertyName1: {\n            path: 'path.to.property1'\n        },\n        propertyName2: {\n            path: 'path.to.property2',\n            limit: 5\n        },\n    }),\n];\n\nngRedux.configureStore(rootReducer, {}, middleware, enhancer);\n```\n\nsettings:\n\n- `path` (required): The path to the property in the state object using dot notation.\n- `filter` (optional): A filter function that determines if the property should be watched for undo/redo. Return true to\n  include the property, and false to exclude it. If not specified, all properties are included.\n- `limit` (optional): The maximum number of past snapshots to keep in the undo history. If the limit is reached, the\n  oldest snapshots are discarded. If not specified, no limit is applied.\n\nImplement the undo/redo functionality in your Angular component or service.\nYou can use the `undo`, `redo`, `jump`, and `clear_history` methods provided by `NgUndoStateActions` to perform the\ncorresponding actions:\n\n```typescript\n// Example component\nimport { Component } from '@angular/core';\nimport { undo, redo, jump, clear_history } from '@angular-redux2/undo';\n\n@Component({\n    selector: 'app-example',\n    template: `\n    \u003cbutton (click)=\"onUndo()\"\u003eUndo\u003c/button\u003e\n    \u003cbutton (click)=\"onRedo()\"\u003eRedo\u003c/button\u003e\n    \u003cbutton (click)=\"onJump(-2)\"\u003eJump Backward\u003c/button\u003e\n    \u003cbutton (click)=\"onJump(2)\"\u003eJump Forward\u003c/button\u003e\n    \u003cbutton (click)=\"onClearHistory()\"\u003eClear History\u003c/button\u003e\n  `\n})\nexport class ExampleComponent {\n    constructor(private undoStateActions: NgUndoStateActions) {\n    }\n\n    @Dispatch\n    onUndo() {\n        this.undoStateActions.undo('propertyName1');\n    }\n\n    @Dispatch\n    onRedo() {\n        this.undoStateActions.redo('propertyName1');\n    }\n\n    @Dispatch\n    onJump(index: number) {\n        this.undoStateActions.jump('propertyName1', index);\n    }\n\n    @Dispatch\n    onClearHistory() {\n        this.undoStateActions.clear_history('propertyName1');\n    }\n}\n```\n\n## State Watch Map\n\nThe state watch map is an object that defines the paths to the state properties you want to track for undo. It has the\nfollowing structure:\n\n```typescript\nexport interface StateWatchMap {\n    [key: string]: {\n        path: string;\n        filter?: (action: any, currentState: any, snapshot: any) =\u003e boolean;\n        limit?: number;\n    }\n}\n```\n\n- `key` (string): The unique identifier for the state property.\n- `path` (string): The dot-separated path to the state property.\n- `filter` (optional function): A filter function that determines if an action should be captured in the undo history\n  for the specific state property.\n\n## Custom Filters\n\nYou can define custom filter functions to control which actions are captured in the undo history for each state\nproperty.\nThe filter function takes three parameters:\n\n- `action`: The dispatched action object.\n- `currentState`: The current store state object.\n- `snapshot`: The snapshot to insert into the history.\n\nThe filter function should return true if the action should be captured, or false otherwise.\nHere's an example of a custom filter function that only captures actions with specific types:\n\n```typescript\nconst stateWatchMap: StateWatchMap = {\n    'todos': {\n        path: 'todos',\n        filter: (action: any, currentState: any, snapshot: any): boolean =\u003e {\n            return action.type === 'ADD_TODO' || action.type === 'REMOVE_TODO';\n        }\n    }\n};\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-redux2%2Fundo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-redux2%2Fundo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-redux2%2Fundo/lists"}