Redux saga複数のAPI呼び出し

Question

私は、redux-sagaを使用して私のapi呼び出しのアクションウォッチャーの束を持っています。事は私が既に持っているコードを繰り返すことなくすべてのAPIをフェッチするためにこれらのアクションウォッチャーを起動するONEアクションウォッチャーを作りたいと思っています。ウォッチャーの1人がPromiseを却下した場合、それは他のウォッチャーをすべてキャンセルするはずです。これを行う最善の方法は何ですか？

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