Does Redux have a built-in way to undo actions?

Question

I'm building an app where actions are performed as the user scrolls down. It would be nice if I could undo those actions as the user scrolls up again, basically turning scrolling into a way to browse through the time line of actions.

Is there a built-in way in Redux to do this? Or would I have to write middleware for this?

Answer 1

I believe the idea is not so much "undo" as much as save a reference to the entire state tree each time an action passes through redux.

You would have a history stack made up of the application state at various times.

let history = [state1, state2, state3]

// some action happens

let history = [state1, state2, state3, state4]

// some action happens

let history = [state1, state2, state3, state4, state5]

// undo an action

let history = [state1, state2, state3, state4]

state = state4

To "undo" an action, you just replace the application state with one of the saved states.

This can be made efficient with data structures that support structural sharing, but in development we don't really need to consider resource constraints too much anyway.

Answer 2

Is there a built-in way in Redux to do this? Or would I have to write middleware for this?

Middleware sounds like the wrong idea in this case because this is purely state management concern. Instead you can write a function that takes a reducer and returns a reducer, “enhancing” it with action history tracking along the way.

I outlined this approach in this answer, and it's similar to how redux-undo works, except that instead of storing the state, you can store actions. (Depends on the tradeoffs you want to make, and whether it's important to be able to “cancel” actions in a different order than they happened.)