Question

我已经创建了Angular SPA应用程序。我在服务器端使用ASP.net核心，客户端状态由redux-observable使用action-reducer-epics处理。

结构类似于：我已经配置了存储，根史诗和根reducer，然后每个组件都有自己的epic，reducer和服务文件。

我想将signalR容纳在redux可观察到的位置，但无法正确集成。

Answer 1

首先将您的中心事件视为可观察到的。我修改了this code以使其与ASP.NET Core SignalR兼容。

然后创建一个史诗般的启动集线器（我正在使用打字稿），在启动时将动作分派到某个地方。

const startNotificationHubEpic: Epic<RootAction, RootAction, RootState, Services> = (action$, store, { notificationHub }) => {
    return action$.pipe(
       filter(isActionOf(startNotificationHub.request)),
       switchMap(action => 
            from(notificationHub.start()).pipe(
                   map(() => startNotificationHub.success()),
                   catchError(err => of(startNotificationHub.failure(err)))
        )));
}

最后，使用startNotificationHub.success操作开始侦听集线器上您感兴趣的每个事件的rsjx事件流。

const listenForMessageEpic: Epic<RootAction, RootAction, RootState, Services> = (action$, store, { notificationHub }) => {
    return action$.pipe(
        filter(isActionOf(startNotificationHub.success)),            
        switchMap(act => 
            notificationHub.on("Message", (messag: string) => ({message})).pipe(
                map(notif => onMessage(notif))
        )));
}

onMessage操作又可以被另一部史诗使用，也可以在化简器中用于将通知数据传递到组件。

Answer 2

我制作了一个小库，用于使用redux，rxjs和redux-observable处理实时SignalR（.NET Core）事件：redux-observable-signalr-core。它无需任何其他设置即可实现自动重新连接。它非常灵活，因此您可以使用它来涵盖几乎所有情况，或者只是查看源代码以构建自己的解决方案。

如何在redux-observable中使用signalR？

2 个答案: