Redux Saga All effects proper usage - reactjs

Question

I've started working with Redux-saga and I've been following the advanced section for composing sagas in parallel.
Currently this is the function that I'm using with all method, I need these to filter and transform some pages metadata before assigning to the Nav component.
function* CreateNavFromPages(action) {
const menu = action.payload.menu
const menuPagesData = toList(menu.get('pages')).map(
page => {
const title = page.get('title');
const uri = page.get('uri');
return toPageData(title, uri);
}
);
const staticPagesData = menuPagesData.filter(p => p.get('kind') === 'static');
const pages = yield all(
staticPagesData.map(page => backend(PagesApi, page.get('id')))
);
console.log(pages);
const staticPagesMetadata = pages
.filter(({ result, err }) => !err && result.items.length > 0)
.map(result => fromJS(buildMetadata(fromJs(result.items[0]))));
const pagesMetadata = menuPagesData.map(page => {
const key = staticPagesMetadata.findIndex(el => findPage(el, id));
if (key) {
return staticPagesMetadata[key].copy({data: page.get('data')});
}
return page;
});
const nav = Immutable.Map({
position: 'top',
target: 'home',
pagesMetadata
});
const {result, err} = yield backend(Navs.create, nav);
if (err) { ...}
else {
yield put(NavActions.createNavSuccessful(result.nav));
return true;
}
}
function findPage(el, id) {
return el.get('id') === id;
}
backend.js
export default function* backend(...args) {
try {
return { result: yield call(...args)};
}
catch (e) {...}
}
pages_api.js
.....
function get(id) {
return fetch('/api/pages/${id}');
}
export default {get}
When I run this on my App, I get the following error:
uncaught at watchMany
at takeLatest(CREATE_NAV, createNavFromPages)
at createNavFromPages
TypeError: pages.filter is not a function
When checking console.log, I see the following:
{size: 2, _origin: 0, _capacity: 2, _level: 5, _root: null, _tail: {Array(2){Generator, Generator}}}
Is there something I'm missing here?
UPDATED: Added PagesApi definition

Answer 1

As the error suggests the problem is here:
const pages = yield all(
staticPagesData.map(page => backend(PagesApi, page.get('id')))
);
The all effect expects a native javascript array as input parameter, however you are passing down Immutable list (which is the return type of staticPagesData.map).
Since the all effect doesn't understand Immutable.js lists it treats it as any other object - that is it resolves to the object itself, which is what you see in your console.log message.
To fix it you can e.g. convert the immutable list to javascript array like so:
const pages = yield all(
staticPagesData.map(page => backend(PagesApi, page.get('id'))).toJS()
);