Ngrx, Firestore and Ionic - best practice

Tommertom · May 29, 2019, 12:38am

Hi

I am workig on an Ionic4 Angular project using NGRX and Firestore.

There is fairly enough information available about this combination, using @Effects.

One part for which I would love to hear your views on the aspect of changing data and having them synced with Firestore and ngrx Store:

Update the Firestore using Effects and then wait until the Firestore pushes the update to the ngrx Store in the app, or update the ngrx Store and the Firestore to ensure the user immediate sees the changes.

For the latter solution I wonder what the best strategy is for low bandwidth phones (slow responses). I am considering a parallel update where in the end the Firestore will overrule the ngrx Store, taking the Firestore as the single source of truth.

Is there any other option you can think of? With not too much efforts of course

Regards

Tom

Some links I visited:

github.com

AngularFirebase/61-ngrx-firestore/blob/master/src/app/pizza/pizza.effects.ts

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/fromPromise';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Action } from '@ngrx/store';
import { Actions, Effect } from '@ngrx/effects';

import * as actions from './pizza.actions';
import * as fromPizza from './pizza.reducer';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

@Injectable()
export class PizzaEffects {

  // Listen for the 'QUERY' action, must be the first effect you trigger

  @Effect() query$: Observable<Action> = this.actions$.ofType(actions.QUERY)
    .switchMap(action => {
        const ref = this.afs.collection<fromPizza.Pizza>('pizzas')

This file has been truncated. show original

feroiu · August 3, 2019, 3:36pm

I’m also stuck on this problem. It’s tricky to perfect the perfect pattern using ngrx’s actions, effects, reducers, selectors, and firestore real time database. Once I get it I’ll post my solution and hopefully help everyone else out.

Tommertom · August 7, 2019, 3:34pm

I skipped efffects and use service to handle side effects like a load. And as a wrapper to all dispatch and query selectors

feroiu · August 7, 2019, 10:12pm

I thought about doing the same haha

In my mind i wanted things organized a certain way like have a store folder inside my feature module. I spent a bunch of time looking through guides, taking courses but all of them were lacking and mostly proof of concepts instead of best practices.

Luckily after enough head bashing I found a really good template and loved the pattern that they implemented.

Check it out https://github.com/mdbootstrap/Angular-Bootstrap-Boilerplate.git