Redux-observable returning some sample data - redux-observable

Question

I am using redux-observable and I need to return some sample data as an Observable. I have the following code in one of my epics
const sampleFilteredStores = Observable.of([{ type: 'FILTERED_STORES', store: 'a' }, { type: 'FILTERED_STORES', store: 'b' }]);
const filteredStores$ = action$.ofType('SEARCH_STORES').mapTo(Observable.of(sampleFilteredStores).mergeAll());
return filteredStores$;
However when I run this I get an error
instrument.js:56 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.(…)
What am I doing wrong here and how do I fix this?

Answer 1

Investigation
In the case of the example code you gave, the first thing we need to do is indent and format the code so that it's easier to understand what is happening.
const somethingEpic = action => {
const sampleFilteredStores = Observable.of([
{ type: 'FILTERED_STORES', store: 'a' },
{ type: 'FILTERED_STORES', store: 'b' }
]);
const filteredStores$ = action$.ofType('SEARCH_STORES')
.mapTo(
Observable.of(sampleFilteredStores)
.mergeAll()
);
return filteredStores$;
};
Exactly how you format your code is your choice, but I personally find something like this much more readable. It will help you debug but also significantly help any future maintainers of your code understand your intent.
mapTo
Now I can see right away one problem, which is that you're passing an Observable to mapTo, which is highly unusual in Rx. It's certainly not wrong 100% of the time, but 99.99% and even in the 0.01% there would be much clearer ways to show the desired intent.
Observable.of
Digging in further, I see two usages of Observable.of.
The first one that stuck out is you pass an Observable to Observable.of: Observable.of(sampleFilteredStores) The same advice as mapTo applies here, this is very uncommon and not recommended because it creates higher order Observables unnecessarily. I do see you use mergeAll() to flatten it, but that gives you an Observable that is basically identical to what sampleFilteredStores is without the indirection.
When I dig even deeper I notice another subtle, but critical thing, you pass an array of actions to Observable.of. This is also highly suspicious because that means you create an Observable that just emits an array of two actions, not emits those two actions sequentially directly. If the later is what you intended, instead you needed to pass the objects directly as arguments themselves. Observable.of(action1, action2, action3, ...etc). You may have gotten confused from seeing someone use Observable.from passing in an array, but that's different than Observable.of
Root Cause
Combining those discoveries I can now see that this epic actually emits an Observable, rather than actions, which is why you're receiving the error from redux. That Observable itself actually would emit an array of actions, so even if you had flatten that Observable out you still would receive the same error.
Solution
It appears the provided code is likely contrived either to simplify your question or as you were learning Rx or redux-observable. But in this specific case I believe you wanted to listen for SEARCH_STORES and when received sequentially dispatch two actions both of type FILTERED_STORES with differing store values.
Using idiomatic Rx, that could look something like this:
const somethingEpic = action => {
return action$.ofType('SEARCH_STORES')
.mergeMap(() => Observable.of(
{ type: 'FILTERED_STORES', store: 'a' },
{ type: 'FILTERED_STORES', store: 'b' }
))
};
Here we're using mergeMap, but since the Observable.of we flatten in emits synchronously we could have used switchMap or concatMap too, they would have had the same net effect--but that's not the case for Observables that emit async! So definitely study up on the various flattening strategy operators.
This chain can be described as: Whenever we receive object with the property type equals SEARCH_STORES, map it to an Observable of two objects (the FILTERED_STORES actions) that emit sequentially and synchronously.
Closing
Hopefully this helps! One thing to keep in mind when learning and using redux-observable is that it is almost entirely "just RxJS" that happens to be dealing with object which are "actions". So normal, idiomatic Rx is normal idiomatic redux-observable. Same with the problems you might encounter. The only real difference is that redux-observable provides the single ofType operator as shorthand to a filter (as the docs describe). If you have Rx issues in the future, you might find it helpful to refactor your examples to use filter and phrase them agnostic of redux-observable since the Rx community is obviously much larger!