What is the best way to implement undo state change (undo store/history implementation) in React Redux

Question

I'm looking out for a history redo/ store reset to the previous state in a redux react application.

I've found a blog telling it can be done by storing present, future and past states in a stack and resetting accordingly.

I've also found a similar question in StackOverflow, but it doesn't give me a proper answer or maybe it's difficult for me to understand.

I've built a demo ToDo app and have used redux-logger to log store details with previous state and updated state. You can find the code here.

Do we have a store reset method in redux, so that we can get the previous state and update the store other that having a store with the present, the past and future states?

Answer 1

For anyone looking for a solution to this in 2020. You don't have to store the entire state object as the present, past, and future.

Instead, you can just store details about what has changed. This can be implemented using ImmerJS. It records all changes done on the state object and generates something called a patch.

Example: If age is updated from 32 to 40, then the generated patch will be:

Patch: [ { op: 'replace', path: [ 'age' ], value: 40 } ]

Inverse Patch: [ { op: 'replace', path: [ 'age' ], value: 32 } ]

It also exposes a method to apply these patches/inverse patches to the state - applyPatch. So, to undo we can apply an inverse patch and to redo we can apply a patch.

You can find details of full implementation here: Implementing Undo-Redo Functionality in Redux using Immer

Answer 2

What is the best way ...

Best way is always difficult to define, it really depends of your use-case and requirements included client and server.

But to get start you you could consider using a library or looking how they approach this problem, some example:

https://github.com/omniscientjs/immstruct

https://www.npmjs.com/package/redux-undo

https://github.com/PowToon/redux-undo-redo

Tutorial with example of todo undo/redo in redux: https://github.com/reactjs/redux/tree/master/examples/todos-with-undo

Or you could implement your own, as redux you could store all your application state. A simple stack could be a simple and efficient way to store your app state at any given time.

let yourHistory = [state1, state2, state3];