Redux-saga에서 한 가지 사가에서 가져온 사가를 가져 오는 방법은 무엇입니까?

Question

내 React 앱에는 차트 데이터를 검색 할 수있는 Saga 콜백 백엔드 API가 있습니다. 소스 코드

function fetchData() { 
    return fetch(`${config.base}dashboard_charts.json`) 
    .then((response) => { 

     if (response.status === 200) { 
      return response.json(); 
     } else if (response.status === 403) { 
      return 'logon'; 
     } 
    }); 
} 

function * getData (action) { 
    try { 
     const charts = yield call(fetchData); 

     if (charts === 'logon') { 
      yield logon(); 
     } else { 
      yield put({ type: UPDATE_DASHBOARD_CHART, charts }); 
     } 
    } catch (error) { 
     yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] }); 
    } 
} 

function * logon (action) { 
    yield auth(); 
} 

export default function * portfolio() { 
    yield [ 
     takeEvery(FETCH_DASHBOARD_CHART, getData) 
    ]; 
}; 

상태가 (200)는 다음 직접 응답을 반환하는 경우 기능 fetchData에서 HTTP 응답 상태에 대한 검사가,있다을 읽어 보시기 바랍니다. 그러나 서버 측에서 403을 반환하면 클라이언트를 인증해야한다는 의미이므로 프로그램은 auth()로 이동하여 로그온을 수행합니다.

그러나 http 응답 상태 코드 검사는 어떻게 든 모든 API 호출에 적용되는 일반적인 기능입니다. 그래서 저는 모든 사가에서 이런 종류의 코드를 반복하고 싶지 않습니다. 이 목적을 위해, 나는 그룹과 같이 내부 확인 응답 코드 서비스 'ResponseHandler에'를 썼다 :

export default function responseHandler (resp) { 
    if (resp.status === 401 || resp.status === 403) { 
     yield auth(); 
    } else if (resp.status === 200) { 

    } else { 
     console.log('error handling'); 
    } 
}; 

을 그리고 그것은하여 fetchData

return fetch(`${config.base}dashboard_charts.json`) 
    .then((response) => { 
     responseHandler(response); 
    }); 

내에서 호출됩니다 그러나이 방법은 결코 작동하지 않습니다 . 'yield auth()'는 responseHandler에서 유효하지 않습니다.

누구나이 케이스의 코드를 더 잘 디자인하는 방법을 제안 할 수 있습니까?

Answer 1

로직을 여러 개 구성하는 것이 합리적 일 수 있습니까?

우선, 성공적인 결과의 형성에 대한 기대에 부응하지 않는 응답 코드의 HTTP가 출현 한 경우 catch-section으로의 이행을 수행하도록 fetch-wrapper를 수정할 수있다. fetchData 기능을 생성기 로직을 ​​입력하지 않고 순수 Promise 형식으로 저장할 수 있습니다.

두 번째로 auth 및 logon 기능의 본질은 분명하지 않습니다. 이러한 조치의 결과로 로그인 양식이 생성되면 적절한 환원 조치를 통해이를 실현하십시오. 다른 페이지로 전환해야하는 경우 react-redux-router을 사용하십시오.

function fetchData() { 
     return fetch(`${config.base}dashboard_charts.json`).then(response => (
      (response.status === 200) ? response.json() : Promise.reject('logon') 
     )); 
    } 

function* getData (action) { 
    try { 
     const charts = yield call(fetchData); 
     yield put({ type: UPDATE_DASHBOARD_CHART, charts }); 
    } catch (error) { 
     yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] }); 
     if(error.message === 'logon') { 
      yield put({ type: PERMORM_AUTORIZE }); 
     } 
    } 
} 

export default function * portfolio() { 
    yield [ takeEvery(FETCH_DASHBOARD_CHART, getData) ]; 
}; 

그리고 당신의 논리가 바로 redux-saga에서 fork를 사용, 더 복잡합니다. 보다 복잡한 작업을 수행 할 수 있습니다.