cannot correctly fetch firebase data via ngrx effect

Question

I seek help from you for the first time as I am in deep trouble. I am using ngrx effects to load some shop items into the cart on app init from firebase realtime database. As the payload I get the whole firebase database snapshot object instead of just the shop items themselves, therefore the ngrx store receives an object it cannot understand and the app state does not change.

Check the photos please: when console.logged(), I see the exact objects that I need. But the Redux Devtools reveal the real deal, and I do not know how to fix this. Could somebody give me advice? Thank you very, very much.

The effect looks like this:

@Effect()
getShopItems: Observable<any> = this.actions.pipe(
    ofType(shopActions.GET_ITEMS),
    switchMap(() => {
        return of(this.database.ref('cart').once('value', snap => {
            snap.forEach(childSnap => childSnap.val());
            // snap.forEach(childSnap =>
            // console.log(childSnap.val()));
        }))
            .pipe(
                map((payload) => {
                    return {
                        type: 'GET_ITEMS_SUCCESS',
                        payload: payload
                    };
                }
            ));
    })
);

The reducer functions for the actions in question look like:

case shopActions.GET_ITEMS: {
            return {
                ...state,
                shopItems: [...state.shopItems],
                itemCount: state.shopItems.length
            };
}
case shopActions.GET_ITEMS_SUCCESS: {
            return {
                ...state,
                shopItems: [action.payload],
                itemCount: state.shopItems.length + 1
            };
}

https://i.stack.imgur.com/MaXqk.jpg

Yes, it does. It is the last thing that gets called on app init. — SharisM, Mar 01 '19 at 13:02
Update: I now know that I am receiving a ZoneAwarePromise as the payload of GET_ITEMS_SUCCESS. Extracting the necessary data from it seems to be the main question now. — SharisM, Mar 01 '19 at 13:14

score 0 · Answer 1 · answered Mar 01 '19 at 13:51

0

Use from rather than of:

import { from } from 'rxjs';

@Effect()
getShopItems: Observable<any> = this.actions.pipe(
    ofType(shopActions.GET_ITEMS),
    switchMap(() => {
        return from(this.database.ref('cart').once('value', snap => {
            snap.forEach(childSnap => childSnap.val());
        }))
            .pipe(
                map((payload) => {
                    return {
                        type: 'GET_ITEMS_SUCCESS',
                        payload: payload
                    };
                }
            ));
    })
);

RxJs from - https://www.learnrxjs.io/operators/creation/from.html

answered Mar 01 '19 at 13:51

camden_kid

12,591
11
52
88

I really do not see the difference, they both return observables and traversing them is the same. Would you give a comment further? – SharisM Mar 01 '19 at 19:22
@SharisM Does it not work? If I refer you to this - https://stackoverflow.com/a/42706216/782358 - the promise returned by the firebase call will not be handled correctly by **of**, but should be by **from**. – camden_kid Mar 01 '19 at 19:53
@SharisM Also, this reference - https://stackoverflow.com/a/42706216/782358 – camden_kid Mar 01 '19 at 20:18
1

Okay, much clearer now! Thank you, sir. I will try to implement this knowledge into my code and see what happens. – SharisM Mar 02 '19 at 09:48
thanks for guidance, I found a couple more flaws in my code and fixed my issue. I upvoted your answer as helpful, but it seems I have too little reputation going on to actually make my voice heard for now. – SharisM Mar 03 '19 at 15:03

cannot correctly fetch firebase data via ngrx effect

1 Answers1