Functions in epic are firing out of order and I can't understand why

Question

*SOLVED The problem was in how I was creating and responding to the observable created by the firebase callback. I also had way too much stuff going on inside my firebase callbacks. I ended up splitting it up a bit more, using the firebase promise structure: https://firebase.googleblog.com/2016/01/keeping-our-promises-and-callbacks_76.html and creating an Observable.fromPromise for the firebase callback within what is now called firebaseAPI.checkForUser. *

Working epic:

export const contactFormFirebaseSubmitEpic = (action$) =>
action$.ofType(START_CONTACT_FORM_FIREBASE_SUBMIT)
  .flatMap((firebaseSubmitAction) => {
   const values = firebaseSubmitAction.values;
   const formattedEmail = firebaseAPI.getFormattedEmail(values);
   const contactsRef = firebaseAPI.getContactsRef(formattedEmail);
    return firebaseAPI.checkForUser(values, formattedEmail, contactsRef);
 })
  .flatMap((data) => concat(
        of(firebaseAPI.recordUserAndUpdateDetails(data))
      ))
  .flatMap((data) => concat(
     of(firebaseAPI.setQuoteData(data))
    ))
  .switchMap((x) => merge(
      of(stopLoading()),
      of(contactFormFirebaseSuccess())
    ));

// original question

Ok so, what I'm trying to achieve is to perform the first action (firebaseAPI.checkUserAndUpdate), then the next, then when both of them are done essentially discard what's there and send out two actions (contactFormFirebaseSuccess and stopLoading).

This all works fine except for one weird thing, the setQuoteData function always runs before the checkUser function. Does anyone know why this might be?

Also if there's a better way to lay this out I'd be very open to suggestions! Cheers. Also I've taken out quite a few variables and things that would make it even more complicated. Basically I just wanted to show that in each case I'm returning an observable from 'doing something with firebase'. But I don't think that's the problem as I have console logs in each of the firebase functions and the setQuoteData one just fires first and then executes the firebase stuff then when it's done the checkUserAndUpdate one runs.

export const contactFormFirebaseSubmitEpic = action$ =>
action$.ofType(START_CONTACT_FORM_FIREBASE_SUBMIT)
.flatMap((firebaseSubmitAction) => {
  const values = firebaseSubmitAction.values;
  return merge(
    firebaseAPI.checkUserAndUpdate(values),
    firebaseAPI.setQuoteData(values),
  )
  .takeLast(1)
  .mergeMap((x) => {
    return merge(
        of(contactFormFirebaseSuccess()),
        of(stopLoading()),
      );
  });
});


const firebaseAPI = {

  checkUserAndUpdate: (values) => {
   const checkUserAndUpdateDetails = firebaseRef.once('value', snapshot => {
     const databaseValue = snapshot.val();
     checkUserExistsAndUpdateDetails(databaseValue, values);
    });
   return Observable.from(checkUserAndUpdateDetails);
  },

  setQuoteData: (value) => {
    const setQuote = setQuoteData(values);
    return Observable.from(setQuote);
    },
};

const stopLoading = () => ({ type: STOP_BUTTON_LOADING });
const contactFormFirebaseSuccess = () => ({ type: SUCCESS });

 checkUserAndUpdate: (values, contactsRef) => {
    const checkUser$ = Observable.from(contactsRef.once('value').then( 
    snapshot => {
    const databaseValue = snapshot.val();
    checkUserExistsAndUpdateDetails(
      values,
      databaseValue,
      contactsRef,);
  })
);
     return checkUser$;
 },

const checkUserExistsAndUpdateDetails = (
  values,
  databaseValue,
  contactsRef,
) => {
 if (databaseValue) { console.log('user exists'); }
  else {
     console.log('new user, writing to database');
     contactsRef.set({
      name: values.name,
      email: values.email,
      phone: values.phone,
    });
  }
};

Answer 1

The problem is that merge does not maintain the order of the streams that you subscribe to, it simply emits events from any of the source streams regardless of what order they emit.

If you need to maintain order you should use concat instead of merge

i.e.

  const values = firebaseSubmitAction.values;
  return concat(
    firebaseAPI.checkUserAndUpdate(values),
    firebaseAPI.setQuoteData(values),
  )

Side note, I don't know why you are using the of operator there, you already have Observables returned from your API so you can just pass those to merge or concat in this case.