How to do a simple notification system with redux-observable?

Viewed 1147

I'm trying to do a simple notification system with redux-observable. I'm new to rxjs so I'm having a hard time doing it.

What I'm trying to do is:

  1. Dispatch an intent to display a notification
  2. Detect the intent with an Epic
  3. Dispatch the action that inserts the new notification
  4. Wait 3 seconds
  5. Dispatch another action that deletes the old notification

This is my Epic:

import { NOTIFICATION_DISPLAY_REQUESTED } from '../actions/actionTypes';
import { displayNotification, hideNotification } from '../actions/notifications';

export const requestNotificationEpic = (action$, store) =>
  action$.ofType(NOTIFICATION_DISPLAY_REQUESTED)
    .mapTo(displayNotification(action$.notification))
    .delay(3000)
    .mapTo(hideNotification(action$.notification));

What really happens is that NOTIFICATION_DISPLAY_REQUESTED is dispatched, and 3 seconds later, hideNotification is dispatched. displayNotification never happens.

I could just dispatch displayNotification from the view, delay 3 seconds and then dispatch hideNotification. But later I want to delete the last notification before adding a new one if there are more than 3 active notifications. That's why I dispatch displayNotification manually from inside the epic in this simple case.

So, how do I achieve this? Sorry if this is super simple question, I'm just new to all this and need some help.

Note: I know redux-saga exists, is just that redux-obsevable made more sense to me.

1 Answers
Related