微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

关于此Angular ngRx(效果)的建议 – websocket事件怎么样?

所以我正在试验ngrx&通过构建以下沙箱来实现ngrx /效果

https://stackblitz.com/edit/ngrx-vanilla

快速介绍:

>它在app / store中有一个root商店
>它在app / features中延迟加载了两个模块
>它在app / commons中有单例服务

三页:

>行动项目:路由到此页面会触发随机生成三个愚蠢的公司行动项目
>用户:基本主人>详细的redux实现与路由器支持
>会议:提出问题的地方,点击“开始会议”,见证相关的意见交流.

问题&背景:

>我理解redux中的所有数据更新都是通过操作实现的
>“效果”库用于处理异步事件,以便根据第三方事件和异步调用分派新操作.
> app / common / meeting / service模仿例如websocket或firebase实时数据库推送更新的行为.

收到更新后(在app / store / effects / meeting.effects.ts中说明),将调度新操作.

最后,问题是:让公共服务了解商店是否是一种干净的做法?将一个监听器注册到websocket / firebase实时数据库以便在推送数据时调度操作的最佳位置在哪里?

在这里,我做了一个效果(meeting.effects)对meetingActions.START_MEETING操作类型做出反应,每当推送数据时,都会向商店发送更新订单,但由于我提出的一系列原因,这感觉不对:

>难以单独进行单元测试(需要比自身更多的上下文)
>如果出现“停止会议”操作,此方法需要存储订阅(或?)以停止订阅.在我的方法中,无法控制在荒野中创造的可观察物.

这些案件通常如何处理?

解决方法

假设websocket发出不同类型的事件,请将每个事件映射到websocket服务中的不同操作

@Injectable()
class WebsocketService{
    private socket$:Observable<Action>
    getActions():Observable<Action>{
        if(!this.socket$) {
           this.socket$= Observable.webSocket(url).pipe(
               map(functionToMapActions),shareReplay(1)
           );
        }
        return this.socket$;
    }
}

其中functionToMapActions将webSocket事件映射到动作,我建议最后添加shareReplay运算符,以便我们只读取一次webSocket.

Observable.webSocket连接到webSocket,并在它们到达时发出事件

当你怀疑webService.getActions()时将建立webSocket连接

您可以在@Effects初始化see here订阅websocket操作

@Effect()
init$= this.websocketService.getActions();

这将在您的应用程序启动后立即发出所有操作(如果在根模块中生效)或者如果模块在延迟加载模块中则加载模块;

或者,如果您对有限的一系列行为感兴趣,您可以这样做

@Effect()
init$= this.websocketService.getActions().pipe(filter(filterNeededActionsHere));

你也可以在这样的特定事件之后开始听动作

@Effect()
init$= this.actions$.pipe(
          ofType('Event which marks start'),swichMapTo(this.websocketService.getActions())
     );

像前面的例子一样,你也可以像以前一样过滤掉这里的行动

希望这能回答你的问题

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐