Getting started with Ionic 2, AngularFire and ngrx/store

It seems I created my own muddled version of ngrx/store in my Ionic 2 + Firebase app … now I get to refactor and I found some great resources.

This is unlike me. I love to find and use proven techniques for coding challenges. I usually do not suffer from the not invented here-syndrom, but somehow I let ngrx/store slip through the cracks.

I think the reason was a combination of:

  1. A very hard deadline. Resulting in long, tiring days.
  2. A new tech stack from top to bottom.

On most projects, I try to mitigate number 1 and will defiantly in the future when number 2 is involved.

Number 2 is what makes being developer equally hard and fun. You get to learn new stuff all the time, but you have to learn new things all the time.

With a new tech stack from top to bottom, there was a limit to how much new knowledge I managed to absorb. After learning the basics of ReactiveX my cup was full, and moving on to ngrx/store became too much.

Luckily code is not written in stone. The last couple of weeks I have been learning and slowly refactoring my code. This time around I am thoroughly enjoying learning new things, yet again!

Resources

These are the resources I found most helpful in understanding how to get started with ngrx/store in an Ionic 2 app using AngularFire.

I recommend beginning with this tutorial from Ashteya Biharisingh showing you the basics of using ngrx/store in an Ionic 2 app:

And watch the videos in Build Redux Style Applications with Angular2, RxJS, and ngrx/store by John Lindquist from eggehead.io1.

To learn about ngrx/effects I recommend The Basics of “ngrx/effects”, @Effect, and Async Middleware for “ngrx/store” in Angular 2 from Jim Lynch.

To see how ngrx/store and ngrx/effects may interact with AngularFire these parts of Akshay Nihalaney Real World Angular Example were helpful:

I also found UI state management with Redux in Angular 4 by Hristo Georgiev handy as many of the above resources have very simplified UI in their examples.

After being done with these I realized I needed to up my ReactiveX game and binge watches these courses by André Staltz on eggehead.io.

I also went back to basic and watched this introduction to Redux by Dan Abramov. It was conceptually very helpful, even though the technology used is Redux and React.js.

Hopefully, you will find these resources helpful as well. If you know of any Ionic 2 (3) + ngrx/store + ngrx/effects resources please let me know. Especially around UI state management.


  1. All egghead.io links are affiliate links giving me a free month if you sign up ;) 

Removing revision from WordPress database

Sometimes when moving a WordPress blog the best option is to export the database and then import it at the new location. When doing it this way, instead of just exporting and importing the content, you move everything – not just the content. Your plugins configurations, your settings and so on and so an are all included in the move.

The other day was my first time moving a WordPress install the database way, and even though it is seemingly straight forward I met some challenges on the way.

The database dump was to large

When importing the database phpMyAdmin kept timing out and only part of the database got imported. The size of my database dump was 12.4 MB and therefore well below the stated limit of 500 MiB. However I was not in the mood to talk to support and after some research I found out that my database dump consisted mostly of revisions.

After getting rid of the revisions the database dump size was down to 3.2 MB and the import went through without a glitch.

Solution: Remove the revisions from the database

I found the solution in this blog post, and used the query option:

[code language="sql"]
 DELETE FROM `wp_posts` WHERE `post_type` = 'revision';
 [/code]

Hope this can be of use!