Redux傳奇多個API調用

Question

我有一堆使用REDX傳奇的api調用的動作觀察者。事情是我想讓ONE動作觀察者，它可以讓所有這些動作觀察者獲取所有的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) 
    ]; 
} 

Answer 1

這個怎麼樣

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實現：

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

的分叉任務的錯誤被傳播到父任務。 我不確定下面是你想要的。但也許它會起作用。

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