Add redux-observable to an existing Redux project

Shane Osbourne
InstructorShane Osbourne

Share this video with your friends

Send Tweet

In this lesson we’ll learn exactly what’s needed to incorporate redux-observable into an existing React/Redux application. We’ll learn what ‘Epics’ are, and how they receive a stream of actions and return a stream of actions. In-between is where we get to apply side-effects, call out to external services etc etc. In this lesson we’ll demonstrate the ‘async’ nature of epics by responding to an action with another, delay action.

Adit Biswas
Adit Biswas
~ 4 years ago

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

Adam Sullovey
Adam Sullovey
~ 4 years ago

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

Stephen
Stephen
~ 3 years ago

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';

Adrian Perez
Adrian Perez
~ 3 years ago

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.

Stephen
Stephen
~ 3 years ago

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.

PCR IT Training
PCR IT Training
~ 3 years ago

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

Marcin
Marcin
~ 3 years ago
Marcin
Marcin
~ 3 years ago

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

Andy Elion
Andy Elion
~ 2 years ago

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