redux-observable: TypeError: action$.ofType(...).delay is not a function

Do you want to request a feature or report a bug?
Bug

What is the current behavior? TypeError: action$.ofType(...).delay is not a function

whenever I pass an Epic to the middleware creator

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsbin.com or similar.

Here’s the configureStore

https://github.com/imranismail/test-redux-observable/blob/master/src/utils/configure-store.js

What is the expected behavior?

No error and middleware should be able to capture the actions

Which versions of redux-observable, and which browser and OS are affected by this issue? Did this work in previous versions of redux-observable?

Chrome 51 OSX redux-observable@0.7.2

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 8
  • Comments: 15 (10 by maintainers)

Most upvoted comments

ActionsObservable does indeed extend Observable but rxjs v5 does not automatically patch the Observable prototype with every operator. This is so that your builds can be smaller, only including what you use. There are several ways for you to import operators, depending on your needs/desires. See the rxjs docs for more info: https://github.com/ReactiveX/rxjs#installation-and-usage

If you do not wish for that behavior, you can inject every operator by placing this in one of your entry files like index.js:

import 'rxjs';

EDIT:

Fixed by just importing rxjs in my index file. This is weird, I thought ActionsObservable is already extending from Observable

I didn’t see your last comment before making mine but yep, that’s one way–but you’ll be importing the entire rxjs library. For many, that’s totally fine, but others are more sensitive about their bundle size.

Fixed by just importing rxjs in my index file. This is weird, I thought ActionsObservable is already extending from Observable

It would be great to add a note in http://jsbin.com/jexomi/edit?js,output, likely with a comment about the operator patching:

// redux/modules/ping.js

// This example imports the entire RxJS library. When
// using this setup locally, you need to patch the operators
// used here:
// import 'rxjs/add/operator/delay';
// import 'rxjs/add/operator/mapTo';

const PING = 'PING';
const PONG = 'PONG';

const ping = () => ({ type: PING });

const pingEpic = action$ =>
  action$.ofType(PING)
    .delay(1000) // Asynchronously wait 1000ms then continue
    .mapTo({ type: PONG });

...

This is something we probably wrongfully assumed people would already know from their Rx background–but it certainly doesn’t hurt to mention it in the documentation since it’s a rather novel behavior. I’ll do that!

The

import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/mapTo';

should be in the examples as well

Added this disclaimer to the top of all the JSBins in the README and UsageWithUIFrameworks.md.

/**
 * IMPORTANT ***************************************************************
 * 
 * This example uses the global version of RxJS that includes ALL operators.
 * Inside your app, you will likely need to import the operators you use or
 * import all of them in your index.js entry file.
 * 
 * Learn more about this: http://goo.gl/4ZlYeC
 */