Redux Saga mehrere Api Anrufe

Question

Ich habe eine Reihe von Aktion Beobachter meiner API Anrufe mit Redux-Saga. Die Sache ist, ich würde gerne machen ONE Action-Beobachter, die alle diese Action-Beobachter feuern, um alle api zu holen, ohne die Codes wiederholen müssen, die ich bereits habe. Wenn einer der Beobachter ein abgelehntes Versprechen zurückgibt, sollte er alle anderen Beobachter abbrechen. Was ist der beste Weg, dies zu tun?

function* watchFetchUsers() { 
    while(true) { 
     yield take([FETCH_USERS]); 
     try { 
      const users = yield call(api.fetchUserData); 
      yield put({ type:FETCH_USERS, payload: users });  
     } catch (err) { 
      yield put({ type:SIGNOUT, status: err }); 
      return err; 
     } 
    } 
} 

function* watchFetchDepartments() { 
    while(true) { 
     yield take([FETCH_DEPARTMENTS]); 
     try { 
      const departments = yield call(api.fetchDepartmentData); 
      yield put({ type:FETCH_DEPARTMENTS, payload: departments });  
     } catch (err) { 
      yield put({ type:SIGNOUT, status: err }); 
      return err; 
     } 
    } 
} 

function* watchFetchPositions() { 
    while(true) { 
     yield take([FETCH_POSITIONS]); 
     try { 
      const positions = yield call(api.fetchPositionData); 
      yield put({ type:FETCH_POSITIONS, payload: positions });  
     } catch (err) { 
      yield put({ type:SIGNOUT, status: err }); 
      return err; 
     } 
    } 
} 

function* watchFetchBanks() { 
    while(true) { 
     yield take([FETCH_BANKS]); 
     try { 
      const banks = yield call(api.fetchBankData); 
      yield put({ type:FETCH_BANKS, payload: banks });  
     } catch (err) { 
      yield put({ type:SIGNOUT, status: err }); 
      return err; 
     } 
    } 
} 

function* watchFetchAuthenticatedUser() { 
    while(true) { 
     yield take([FETCH_AUTHENTICATED_USER]); 
     try { 
      const user = yield call(api.fetchAuthenticatedUser); 
      yield put({ type:FETCH_AUTHENTICATED_USER, payload: user });  
     } catch (err) { 
      yield put({ type:SIGNOUT, status: err }); 
      return err; 
     } 
    } 
} 

export default function* fetchData() { 
    yield [ 
     fork(watchFetchUsers), 
     fork(watchFetchDepartments), 
     fork(watchFetchPositions), 
     fork(watchFetchBanks), 
     fork(watchFetchAuthenticatedUser) 
    ]; 
} 

Answer 1

Wie über diese

export function* watchFetchAll() { 
    while(true) { 
    // const {type} = yield take(['FETCH_A', 'FETCH_B', ...]); 
    const {type} = yield take(action => /^FETCH_/.test(action.type)); 
    console.log('type %s', type); 
    try { 
     const data = yield call(api.fetch, type); 
     console.log('data', data); 
     yield put({type, payload: data}) 
    } 
    catch (error) { 
     console.log('error', error); 
     yield put({ type: 'SIGNOUT', status: error }) 
    } 
    } 
} 

export default function* fetchData() { 
    yield *watchFetchAll(); 
} 

Die einfache Implementierung api:

const api = { 
    fetch(type) { 
    switch (type) { 
     case 'FETCH_A': return Promise.resolve({result: 'Fetched A type'}); 
     case 'FETCH_B': return Promise.resolve({result: 'Fetched B type'}); 
     // other cases 
     default: console.log(`Unknown type ${type}`); 
    } 
    } 
}; 

Answer 2

Die Fehler des gegabelten Aufgabe übergeordnete Aufgaben propagiert wird. Ich bin mir nicht sicher, ob das Folgende ist, was Sie wollen. Aber vielleicht wird es funktionieren.

function* watchFetchUsers() { 
    while(true) { 
     yield take([FETCH_USERS]); 
     const users = yield call(api.fetchUserData); 
     yield put({ type:FETCH_USERS, payload: users });  
    } 
} 

function* watchFetchDepartments() { 
    while(true) { 
     yield take([FETCH_DEPARTMENTS]); 
     const departments = yield call(api.fetchDepartmentData); 
     yield put({ type:FETCH_DEPARTMENTS, payload: departments });  
    } 
} 

function* watchFetchPositions() { 
    while(true) { 
     yield take([FETCH_POSITIONS]); 
     const positions = yield call(api.fetchPositionData); 
     yield put({ type:FETCH_POSITIONS, payload: positions });  
    } 
} 

function* watchFetchBanks() { 
    while(true) { 
     yield take([FETCH_BANKS]); 
     const banks = yield call(api.fetchBankData); 
     yield put({ type:FETCH_BANKS, payload: banks });  
    } 
} 

function* watchFetchAuthenticatedUser() { 
    while(true) { 
     yield take([FETCH_AUTHENTICATED_USER]); 
     const user = yield call(api.fetchAuthenticatedUser); 
     yield put({ type:FETCH_AUTHENTICATED_USER, payload: user }); 
    } 
} 

export default function* fetchData() { 
    while (true) { 
     let tasks; 
     try { 
      tasks = yield [ 
       fork(watchFetchUsers), 
       fork(watchFetchDepartments), 
       fork(watchFetchPositions), 
       fork(watchFetchBanks), 
       fork(watchFetchAuthenticatedUser) 
      ]; 
      yield join(...tasks) 
     } catch (e) { 
      yield cancel(...tasks); 
      yield put({ type:SIGNOUT, status: err }); 
     } 
    } 
} 

Oder wenn Sie nicht wollen, Aufgaben wiederherzustellen,

//.... 
export default function* fetchData() { 
    try { 
     yield [ 
      fork(watchFetchUsers), 
      fork(watchFetchDepartments), 
      fork(watchFetchPositions), 
      fork(watchFetchBanks), 
      fork(watchFetchAuthenticatedUser) 
     ]; 
    } catch (e) { 
     yield put({ type:SIGNOUT, status: err }); 
    } 
}