search

nilsmehlhorn / ngrx-wieder

Lightweight undo-redo for Angular with NgRx & immer.js
https://nils-mehlhorn.de/posts/angular-undo-redo-ngrx-redux
MIT License
127 stars 10 forks source link

CRUD operations support #89

Closed RatikantS closed 7 months ago

RatikantS commented 7 months ago

In a case where all the changes (CRUD ops) done by user are persisted, how to do undo/redo in this case? - can you please provide any sample code?

nilsmehlhorn commented 7 months ago

Depends on how you're persisting your state.

If its an endpoint where you PUT the whole state that can be undone/redone, then you can create an effect based on the UNDO and REDO actions and subsequently make a request after each occurrence (potentially debounced).

  save$ = createEffect(() => this._actions$.pipe(
    ofType("UNDO", "REDO"),
    concatLatestFrom(() => this._store),
    switchMap(([action, state]) => /* save state */)
  )

That's basically auto-save as described here.

If you need to know about the type or even the payload of the action that has been undone/redone, your best shot is probably to set trackActionPayload to true and retrieve the action via selectHistory within a similar effect. Based on the action you could perform the "inverse" CRUD operation.

RatikantS commented 7 months ago

Thank you so much! For POST, DELETE operations - how the state can be restored? can you please provide some sample code for DELETE operation and how to configure the corresponding inverse operations? For example my first action I did is; I deleted some records / info, how to undo that? how to configure inverse operation for this DELETE operation?

nilsmehlhorn commented 7 months ago

You'll have to store the state in the original action payload. When you configure trackActionPayload to true, this will be available in the history selection.

I'll close this issue. Please post to StackOverflow for further assistance. I don't have time to solve this fully for you, sorry.

RatikantS commented 7 months ago

Thanks a lot for you support, if you can add these kind of use cases sample code in documentation then would be great! thanks a lot!!

nilsmehlhorn commented 7 months ago

You're also welcome to open a PR for adding such samples to the Readme when you've got something figured out! 🙂