Skip to content

Releases: angular-redux2/undo

v1.1.0

12 May 18:31
Compare
Choose a tag to compare

What's Change

  • 5a86b57 docs: update api docs
  • c6324e8 README: update
  • c29bc90 add action to inset() for use in the filter settings.
  • 64b77e3 undo-state.component: add limit support in insert()
  • 3dc350f undo-state.component: add filter() in insert()
  • 3d25006 undo.service: add settings with filter and limit and path
  • fc22cb6 undo-state.component: return the same state on validation failed

v1.0.0

12 May 18:26
Compare
Choose a tag to compare

angular-redux2/undo

@angular-redux2/undo is an @angular-redux2/store package that provides undo and redo functionality for state
management using Redux.

Discord
npm version
downloads per month

Installation

You can install angular-redux2/sync using npm:

npm install @angular-redux2/undo

Usage

To use @angular-redux2/undo in your Angular application, follow these steps:
Define a StateWatchMap object that maps the properties you want to track for undo/redo operations to their corresponding
state paths and configure the undo middleware in your Angular-Redux2/store setup by including it in the list of middleware:

const middleware: Array<Middleware> = [
    ngUndoMiddleware({
        propertyName1: {
            path: 'path.to.property1'
        },
        propertyName2: {
            path: 'path.to.property2'
        },
    }),
];

ngRedux.configureStore(rootReducer, {}, middleware, enhancer);

Implement the undo/redo functionality in your Angular component or service.
You can use the undo, redo, jump, and clear_history methods provided by NgUndoStateActions to perform the corresponding actions:

// Example component
import { Component } from '@angular/core';
import { undo, redo, jump, clear_history } from '@angular-redux2/undo';

@Component({
    selector: 'app-example',
    template: `
    <button (click)="onUndo()">Undo</button>
    <button (click)="onRedo()">Redo</button>
    <button (click)="onJump(-2)">Jump Backward</button>
    <button (click)="onJump(2)">Jump Forward</button>
    <button (click)="onClearHistory()">Clear History</button>
  `
})
export class ExampleComponent {
    constructor(private undoStateActions: NgUndoStateActions) {}

    @Dispatch
    onUndo() {
        this.undoStateActions.undo('propertyName1');
    }

    @Dispatch
    onRedo() {
        this.undoStateActions.redo('propertyName1');
    }

    @Dispatch
    onJump(index: number) {
        this.undoStateActions.jump('propertyName1', index);
    }

    @Dispatch
    onClearHistory() {
        this.undoStateActions.clear_history('propertyName1');
    }
}