Implementing Redux Time Travel in an Ionic Application

Implementing an Undo Redo System (or Time Traveling) in an Ionic application can be complex, we have to keep in memory states, changes, actions, bindings and this is a huge headache.
On the other side if we use Redux, this can be done with 10-20 lines of code.
So let’s use this baby!
This tutorial is the continuation of the previous one so be sure to take a look there if you need more information on how to setup Redux or why we should use it.

We are going to display two new information:

  1. The whole States history
  2. The previous State

Let’s start by adding the Redux undo library:

Template

The home.html file will be updated as follow:

We won’t show the previous States by using squares otherwise it will be difficult to analyze. Two arrays will be shown there thanks to the async and json Pipe.
The async Pipe will handle the Observables that are returned and the json will format the data.

The last addition at the end of this file:

Those two buttons will trigger the undo and redo methods allowing us to jump back and forward.

TypeScript

We can now move to the home.ts file:

The Redux Undo plugin isn’t an Angular library so we can’t add it to the app.module file nor inject it in our Ionic application.
This is still JavaScript so we can still acquire it by using the require method.

This library will change the structure of our Redux Store as follow:

ionic redux time travel undo redo structureWe are going to acquire the data from the past and present properties in the home.ts file:

The select Decorator is now fully used:

  • The currentColorList$ property will have the store.present.colorList information
  • The previousColorList$ property will have the past information
  • The previousState$ property is a bit more tricky. The select Decorator returns our Store, from there, the past property is an array containing the previous States. We only need to grab the last element

The properties our now ready!

We now need to drop by the HomePage constructor to allow the Time Traveling feature:

It’s very simple.
The only modification here is using the undoable.default method to transform our colorReducer and that’s it, we are good to go!

Here is our application:

ionic redux time travel undo redo init

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Final step: adding the undo and redo methods:

Once again, those methods are very simple.
Some new Redux Actions are dispatched on the Redux Store. Those Actions are created by the undoable library. They are located in the ActionCreators property and ready to be used.

Here is our time travel feature in action:

ionic redux time travel undo redo init

Impressive right?

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Implementing Redux in an Ionic application can be quite a task (I have dedicated a whole tutorial on that). Once this is done, we can easily add new complex features without breaking a sweat.
In this case, we only need to install the redux-undo library, wrap it around our Reducer and dispatch the library’s Actions to our Store. This Time Travel feature generally takes a lot of brainpower and hours, here it’s done in 10 minutes.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Shares