Redux 썽크 작업 및 공유 상태

Question

비동기 작업이 해고 될 때 및 완료 할 때 내 응용 프로그램을 알고 싶습니다. 그 이유는 모든 비동기 작업이 완료되었을 때 true으로 설정하는 내 응용 프로그램의 전체 loading 상태를 원한다는 것입니다. 초기 구현에서는 콜백에 대한 전역 카운터를 사용했습니다.

이 작업은 파일마다 다를 수 있으며 각기 다른 지사를 담당하는 별도의 축소기에 의해 청취 될 수 있습니다. 나는 다음과 같을 수 내 비동기 작업 redux-promise-middleware 그래서 하나와 결합 thunk-middleware을 사용하고

는 :

export const requestSiteData =() => (dispatch, getState, api) => { 
    const url = '/endpoint'; 

    return dispatch({ 
    type: 'STATE_BRANCH/REQUEST_SOME_DATA', 
    payload: api.fetch(url) 
    }).catch(() => {}); 
}; 

이 다음 때 STATE_BRANCH/REQUEST_SOME_DATA_FULFILLED 또는 STATE_BRANCH/REQUEST_SOME_DATA_REJECTED 완전한 파견 것이다.

약속 미들웨어 때문에 나는 액션을 미리 결정하고 다른 액션을 디스패치 할 수 없기 때문에 호출을 가로 채서 카운트/얼마나 많은 아약스 요청이 있었고 얼마나 많은가 완료했는지 판단하기가 어렵다. 내 감속기에서.

분명히 상태를 업데이트 할 수 있지만 비동기 작업은 상태 트리의 여러 부분으로 분할 될 수 있으므로 요청을 관리하기위한 전체 위치가 필요하지 않습니다.

누구든지 이런 유형의 문제를 해결할 수있는 아이디어가 있습니까? 설명/유스 케이스가 명확하지 않은 경우 고함.

Answer 1

썽크는 비동기 호출 코드가

export function asyncAction() { 
    return function(dispatch){ 
     fetchCall().then((data)=>data.json()) 
      .then((data)=>disptach(handleAsyncDataAction(data)) 
    } 

되어야하고 fetchCall() 함수를 작성해야하므로 경우에 하나씩 실행 함수의 체인이다.

function fetchCall(){ 
    return fetch('your_url'); 
} 

당신이 3 가지 방법을 쓸 필요가 전화를 가져 오는 하나의 끝에 있도록 감속기에 결과를 반환됩니다 handleAsyncData (데이터) 작업입니다.

1 기능 당신은 반환이 기능

function fetchCall(){...} 

3.와 마지막 함수에 약속을 작성합니다 기능

export function asyncAction(){..} 

2 구성 요소

에서 호출 반환 데이터를 처리하여 감속기로 보냅니다.

function handleAsyncData(data){....} 

Answer 2

보류중인 작업을 추적 도움이 될 것입니다 redux-promise 주위를 기반으로 돌아 오는 미들웨어가 :

redux-pending