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 ;)