ngrx store does not update UI after dispatched action from firebase promise

问题

I am trying to develop a basic NativeScript app using Angular 4. I am also using ngrx store and firebase as a realtime database.

When I use a sample array and update the store and not integrate with firebase the program works fine. UI gets updated too.

let value = [
    {
        "description": "Groups discussing about Technology",
        "category": "Tech"
    },
    {
        "description": "Groups for all kinds of sports ",
        "category": "Sports"
    }
];

this.store.dispatch({ type: GroupCategoryListActions.ADD_ITEMS, payload: value });
this.store.dispatch({ type: GroupCategoryListActions.LOAD_SUCCESS });

However when I integrate with firebase and try to retrieve the same data using a firebase query, although the query returns the same array as in the above code sample but the UI doesn't get updated. Below is the code to fetch from firebase.

firebase.init()
    .then((result) => {
        firebase.query(
            (result) => {
                if(!result)
                    this.store.dispatch({ type: GroupCategoryListActions.LOAD_ERROR });

                this.store.dispatch({ type: GroupCategoryListActions.ADD_ITEMS, payload: result.value });
                this.store.dispatch({ type: GroupCategoryListActions.LOAD_SUCCESS });
            },
            '/groupCategory',
            {
                orderBy: {
                    type: firebase.QueryOrderByType.KEY,
                    value: 'category'
                }
            });
    },
        (error) => console.log("firebase.init error: " + error)
    );

Here is the url to my firebase database

回答1:

That's entirely normal behavior for Angular; the query promise is not part of the Angular lifecycle. That's not specific to the Firebase plugin by the way.

You can use NgZone to make the result attach to the Angular lifecycle so your view will update. Inject zone: NgZone in your @Component constructor and wrap the stuff after (result) => { in this.zone.run(() => { /* your result-handling code here */}).

来源：https://stackoverflow.com/questions/45651990/ngrx-store-does-not-update-ui-after-dispatched-action-from-firebase-promise