Redux Sagas Recursion Not Working - redux

Question

I want to find a item and its sub items by item id, and I write the following code, but fetchSubItems() always not working, and throwing exception 'TypeError: Cannot read property 'root' of undefined'， anyone can help me?
export function *fetchItem(api, id){
const item = yield call (api.getItem, id)
yield put(Actions.addItem(item))
yield call(fetchSubItems, item)
yield put(Actions.success())
}
export function *fetchSubItems(api, item){
if(item.children){
const children = yield item.children.map((id)=>{
return call(api.getItem, id)
})
yield put(Actions.addItems(children))
// the following lines throws 'TypeError: Cannot read property 'root' of undefined'
yield children.map((child)=>{
call(fetchSubItems, api, child)
})
}
}

Answer 1

It seems that a return statement is missing in the last call. The working example:
import Promise from 'bluebird';
import { delay } from 'redux-saga';
import { call } from 'redux-saga/effects';
import {
reducer
} from '../reducers/counter';
import { logger } from '../utils';
const name = '19/Tree_Traversal';
const log = logger(name);
const delayTime = 10;
const tree = {
1: {children: [2, 3]},
2: {children: [4, 5, 6]},
3: {children: []},
4: {children: []},
5: {children: []},
6: {children: [7]},
7: {children: []}
};
const api = {
getItem(id) {
log(`getItem(${id})`);
return delay(delayTime, tree[id]);
}
};
export function *fetchItem(/*api, */id = 1) {
const item = yield call(api.getItem, id);
// yield put(Actions.addItem(item))
yield call(fetchSubItems, /*api, */item);
// yield put(Actions.success())
}
export function *fetchSubItems(/*api, */item) {
if (item.children) {
const children = yield item.children.map((id) => {
return call(api.getItem, id);
});
// yield put(Actions.addItems(children))
yield children.map((child) => {
return call(fetchSubItems, child); // <=== added `return`
});
}
}
export default {
name,
saga: fetchItem,
reducer: reducer,
useThunk: !true,
execute(store) {
return Promise.delay(8 * delayTime)
.then(() => this);
}
};
returns the following log:
00000000: [counter reducer] action Object {type: "##redux/INIT"}
00000003: [Runner] ---------- running example 19/Tree_Traversal
00000004: [Runner] store initial state 0
00000008: [19/Tree_Traversal] getItem(1)
* 00000060: [19/Tree_Traversal] getItem(2)
00000061: [19/Tree_Traversal] getItem(3)
* 00000074: [19/Tree_Traversal] getItem(4)
00000074: [19/Tree_Traversal] getItem(5)
00000075: [19/Tree_Traversal] getItem(6)
* 00000088: [19/Tree_Traversal] getItem(7)
00000091: [Runner] store final state 0
00000092: [Runner] ---------- example 19/Tree_Traversal is done