Redux saga 다중 API 호출

Question

나는 redux-saga를 사용하여 내 API 호출의 작업 관찰자를 보유하고 있습니다. 것은 내가 이미 가지고있는 코드를 반복하지 않고 모든 API를 가져 오기 위해 이러한 모든 행동 관찰자를 해고하는 ONE 액션 워처를 만들고 싶습니다. 감시자 중 하나가 거부 된 약속을 반환하면 다른 모든 감시자를 취소해야합니다. 이 일을하는 가장 좋은 방법은 무엇입니까?

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 1

. 아래 내용이 원하는지 확실하지 않습니다. 하지만 어쩌면 작동 할 수도 있습니다.

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 }); 
     } 
    } 
} 

아니면 작업을 복원하지 않으려면,

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

Answer 2

갈래 작업의 오류가 부모 작업에 전파됩니다 :이

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(); 
} 

간단한 API 구현에 대해 어떻게

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) 
    ]; 
}