reactjs - How to set up and subsequently cancel multiple watchers in redux-sagas -

just trying head around redux-sagas , running in problem setting 2 watchers in saga , subsequently cancelling them.

some background: have json editor component saga handles calls backend api load , save json schema. project based on react boilerplate , structure of application pretty same.

here relevant code:

export function* loadschemawatcher() {   const action = yield take(load_schema)   yield call(loadschema, action) }  export function* saveschemawatcher() {   while (true) {     const action = yield take(save_schema)     yield call(saveschema, action)   } }  export function* editordata() {   const watcher = yield [     fork(loadschemawatcher),     fork(saveschemawatcher)   ]    yield take(location_change)   yield watcher.foreach(task => cancel(task)) }  export default [   editordata, ] 

i assumed yield watcher.foreach(task => cancel(task)) loop on array of tasks aren't being cancelled.

your code doesnt work because foreach returns undefined. you'll have replace map return array of cancel effects

yield watcher.map(task => cancel(task)) 

you can use race effect cancel whole array effect declaratively. note fork has been replaced call

export function* editordata() {   yield race([     [       call(loadschemawatcher),       call(saveschemawatcher)     ],     take(location_change)   ]) }