0

I have an events database maintained in Firestore. I use AngularFire5 to keep the events synced to my app.

The events have many 'sessions', that can be updated my multiple administrators and users(ratings, questions etc).

I'm using ngrx store, reducers and effects to maintain the sync. I was able to figure out the single session update/delete/add.

The issue is that the initial load of sessions returns a session[]. And beyond that, the snapshot changes could return 'added', 'modified' and 'removed' session. How can I use a single action+reducer function to add when session(s) is not existing, but update or remove when session(s) existing. (I'm not calling store.dispatch within my firebase service, I'm using the effects to manage this)

session.effect.ts

@Effect()
    getSession: Observable<Action> = this.actions.ofType(SessionActions.ADD_SESSION)
        .map((action: SessionActions.AddSession) => action.payload)
        .switchMap(payload => this.db.getSessions(payload)
        .map((sessions:Session[]) => new SessionActions.AddSessionSuccess(sessions))
    );

session.reducer.ts

export function SessionReducer(state: Session[], action: Action) {

    // console.log('SessionsReducer :: Action Type: ' + action.type + ', Action Payload: ' + JSON.stringify(action.payload));

    switch(action.type) {
        case SessionActions.ADD_SESSION_SUCCESS:
            return [ ...state, action.payload ];
        case SessionActions.CREATE_SESSION_SUCCESS:
            return [ ...state, action.payload ];
        case SessionActions.UPDATE_SESSION_SUCCESS:
            return state.map(session => {
                return session.id === action.payload.id ? Object.assign({}, action.payload) : session;
            })
        case SessionActions.ADD_SESSION:
        case SessionActions.DELETE_SESSION_FAILURE:
            return state;
        default:
            return state;
    }
}

session.actions.ts

//Used to search the sessions by event id, think of it as GetSessions
export class AddSession implements Action {
    readonly type = ADD_SESSION;
    constructor(public payload: string) {}
}

export class AddSessionSuccess implements Action {
    readonly type = ADD_SESSION_SUCCESS;
    constructor(public payload: Session[]) {}
}
Elvis Ninan
  • 83
  • 1
  • 9
  • To make sure I'm understanding well: do you want to add another action like "SYNC_SESSION", that take Session[] as payload in order to synchronize (add/delete/update) whole list of existing sessions from your db? – Benjamin Caure Nov 12 '17 at 13:38
  • Yes, that's exactly my first need. Beyond that how can could I extend it to show UI notifications on success/failure events.I don't want it on each session, else I'll be popping up too many notifications on initial load right? – Elvis Ninan Nov 12 '17 at 14:26
  • Do you mean you want to popup sync result message like "3 sessions created, 0 updated, 1 removed"? – Benjamin Caure Nov 12 '17 at 14:36
  • Yes, absolutely right. – Elvis Ninan Nov 12 '17 at 14:46
  • You should update your question then. Your initial question is quite simple but this message generation requires for each sessions to dispatch the correct action in combineLatest operator then build message. It's quite complicated to make full answer sorry... – Benjamin Caure Nov 12 '17 at 14:57
  • Ok, forget the second part, how do I keep the sessions in sync ? – Elvis Ninan Nov 12 '17 at 19:15

0 Answers0