How to use signalR with Redux-observable?

Question

I have created Angular SPA application. I am using ASP.net core at server side & client side state is handled by redux-observable using action-reducer-epics.

The structure is like : i have configured store, root epics and root reducer and then each component has its own epic, reducer & service files.

I want to accommodate signalR in redux-observable but not able to integrate it properly.

Some code and a proper description of your troubles may definitely help. — Adriano Repetti, Aug 17 '18 at 06:50

score 4 · Accepted Answer · edited May 13 '19 at 06:58

First up get your hub events as a observable. I adapted this code to work against ASP.NET Core SignalR.

Then create a epic to start the hub (I am using typescript), dispatch that action somewhere on startup.

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)))
        )));
}

Finally use the startNotificationHub.success action to start listening to rsjx streams of events on the hub for every event you are interested in.

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))
        )));
}

The onMessage action in turn can be consumed by another epic or used in a reducer to pass the notification data through to a component.

score 1 · Answer 2 · answered Aug 04 '19 at 06:55

1

I've made a tiny library to handle realtime SignalR (.NET Core) events using redux, rxjs and redux-observable: redux-observable-signalr-core. It implements automatic reconnect without any additional setup. It's pretty much flexible so you may use it to cover almost any scenario or just take a look at the source code to build your own solution.

answered Aug 04 '19 at 06:55

Denys Kashkovskyi

61
6

this library doesn't seem to be maintained. there are no docs and i get errors when trying to build. doesn't seem worth using. – selanac82 Jul 13 '20 at 16:23

How to use signalR with Redux-observable?

2 Answers2