cannot correctly fetch firebase data via ngrx effect - firebase

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://imgur.com/a/pDGAwFI

Answer 1

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