如何收听Firebase更新并触发效果/存储副作用以更新Store状态？ [英] How to listen to Firebase update and trigger effect/store side effect to update the Store state?

问题描述

我很困惑将Firebase与ngrx / store集成在一起。由于Firebase具有基于套接字的实时更新，所以无论何时更新Firebase，商店数据都已经与Firebase数据同步。问题是，我不知道如何收听Firebase更新并触发效果/存储的副作用，以在Firebase和客户端存储上进行更多更新。任何有关我应该如何处理这个问题的建议。现在，我必须使用长时间的Observable.interval（5000）策略才能触发一个服务函数来查询Firebase是否发生更新。代码如下：

  @Effect（）newMessages $ = Observable.interval（5000）
 .withLatestFrom （uiState）=> uiState）
 .debug（我们正在查询Firebase是否有更新...）
 .filter（uiState => Boolean（uiState.userId））
 .switchMap（uiState => this.threadsService.loadNewMessagesForUser（uiState.userId）
 .take （1）
 .switchMap（data => this.threadsService.deleteMessagesQueuePerUser（uiState.userId）.mapTo（data））
）
 .debug（从服务器收到的新消息，删除临时记录）
 .withLatestFrom（this.store.select< UiState>（uiState））
 .map（（[unreadMessages，uiState]）=> new NewMessagesReceivedAction（{ b $ b unreadMessages，
 currentThreadId：uiState.currentThreadId，
 currentUserId：uiState.userI dNewMessagesForUser和deleteMessagesQueuePerUser是firebase的AngualrFire2函数。它基本上使用列表来获取（跟踪）firebase上的新更新，并在我们知道自最近5秒以来发生了什么新更新时，删除firebase上的跟踪数据。我很想删除这个逻辑，直接听取firebase的更新并触发我的副作用。 理论 这应该触发连续更新，并切换到一个新的更新流，当   code> uiState 更改。
 
 
  @Effect（）newMessages $ = this.store。选择< UiState>（uiState）
 .debug（我们正在查询Firebase以查看是否发生了更新...）
 .filter（uiState => Boolean（uiState.userId）） 
 .switchMap（uiState => this.threadsService.loadNewMessagesForUser（uiState.userId）
 .do（（）=> this.threadsService.deleteMessagesQueuePerUser（uiState.userId）.subscribe（））
 .map（unreadMessages => new NewMessagesReceivedAction（{
 unreadMessages，
 currentThreadId：uiState.currentThreadId，
 currentUserId：uiState.userId 
}）
）
）
 .debug（从服务器收到新消息，并从Firebase删除临时记录）; 
  
 
I am very confused on integrating Firebase with ngrx/store. Since Firebase has socket based "live" update, so the store data is already sync with Firebase data whenever I update Firebase. The problem is, I do not know how to listen to Firebase update and trigger a side effect with effect/store to do some more update on Firebase and the client store. Any suggestion on how should I approach this problem. For now, I have to use a long pull Observable.interval(5000) strategy to trigger a service function to query Firebase to find out if or not update is happened. The code is below: 
    @Effect() newMessages$ = Observable.interval(5000)
        .withLatestFrom(this.store.select<UiState>("uiState"))
        .map(([any,uiState]) => uiState)
        .debug("We are querying Firebase to see if any update happened...")
        .filter(uiState => Boolean(uiState.userId))
        .switchMap(uiState => this.threadsService.loadNewMessagesForUser(uiState.userId)
          .take(1)
          .switchMap(data => this.threadsService.deleteMessagesQueuePerUser(uiState.userId).mapTo(data))
        )
        .debug("new messages received from server, and deleted temp record from Firebase")
        .withLatestFrom(this.store.select<UiState>("uiState"))
        .map(([unreadMessages, uiState]) => new NewMessagesReceivedAction({
          unreadMessages,
          currentThreadId: uiState.currentThreadId,
          currentUserId: uiState.userId
        }))
loadNewMessagesForUser and deleteMessagesQueuePerUser is firebase AngualrFire2 function. It basically use list to get (keep track) of new update on firebase, and delete the tracking data on firebase when we know what new update is happened since the last 5 second. I would love to remove that logic and just listen to firebase for update directly and trigger my side effect. 
解决方案
In theory this should trigger continuouse updates and switch to a new-update stream when the uiState changes.
@Effect() newMessages$ = this.store.select<UiState>("uiState")
        .debug("We are querying Firebase to see if any update happened...")
        .filter(uiState => Boolean(uiState.userId))
        .switchMap(uiState => this.threadsService.loadNewMessagesForUser(uiState.userId)
          .do(() => this.threadsService.deleteMessagesQueuePerUser(uiState.userId).subscribe())
          .map(unreadMessages => new NewMessagesReceivedAction({
              unreadMessages,
              currentThreadId: uiState.currentThreadId,
              currentUserId: uiState.userId
            })
          )
        )
        .debug("new messages received from server, and deleted temp record from Firebase");


                        
这篇关于如何收听Firebase更新并触发效果/存储副作用以更新Store状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！