Add redux-observable to an existing Redux project

hi, just noticed that this lesson may need to be updated. redux-observable doesnt load the operators by default and each operator like 'do', 'switchMap', 'ignoreElements' need to be loaded by a seperate import

I experienced that. My src/epics/index.js file looks like this and it is working:

import {Observable} from 'rxjs'
import {combineEpics} from 'redux-observable'

// import individual rxjs operators
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/ignoreElements';

function loadStoriesEpic(action$, store) {

	return action$
		.do(action => console.log(action))
		.ignoreElements()
}

export const rootEpic = combineEpics(loadStoriesEpic)

The redux-observable docs talk about it here https://redux-observable.js.org/docs/Troubleshooting.html

return Observable.of(clear()).delay(2000);

returns an error even with the new imports above.

TypeError: Object(...) is not a function

You need to also add.

import 'rxjs/add/operator/delay';

Do you have a shortcut to open source code on Github on PhpStorm or was that opened manually? Specifically when you did the showing of ofType.

Using the latest rxjs, all the operators need to be imported statically, as well as rjx/Observable. Once this has been done the errors are not an issue. This course has not yet been updated to reflect that.

Along with installing all operators individually, I found that I had to use rxjs-compat to get them to be recognized. rxjs-compat is in the project package.json, just not mentioned in the tutorial

also found that, following the instructions in this link: https://redux-observable.js.org/MIGRATION.html#setting-up-the-middleware I was able to fix an error I was getting, trying to pass the rootEpic into const epicMiddleware = createEpicMiddleware(); As the link describes, you should not pass the epic into the middleware creation function, rather, after the store is defined run something like this epicMiddleware.run(rootEpic);

First of all – this lesson without being updated is a pain to pass. So many things that can go wrong. One can think that he solved the error, when the next one happens.

IMO it's better to use the pipeable operators that they mentioned: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

First look at the comment that PCR IT Training made - about running the middleware instead of passing a rootEpic into the createEpicMiddleware function.

In the src/epics you can import all of the operators (not recommended for production) using: import * as operators from 'rxjs/operators' And then destructure them: const { tap, ignoreElements } = operators;

And yes - do being the reserver keyword is now tap .

This one might be also useful: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#import-paths

import {Observable, of} from 'rxjs'; import {combineEpics} from 'redux-observable'; import {LOAD_STORIES} from '../actions'; import {clear} from '../actions';

import 'rxjs/add/operator/do'; import 'rxjs/add/operator/ignoreElements'; import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/delay';

function loadStoriesEpic(action$) { return action$.ofType(LOAD_STORIES) .switchMap(() => { return of(clear()).delay(2000); }) }

export const rootEpic = combineEpics(loadStoriesEpic);

Statc Methods of Observable have been removed So Observable.of no longer works with rxjs 6