비동기 Redux 작업에 저장소를 연결하는 방법

Question

비동기 작업 fetchTasks에 작업 목록이 제공되며 각 작업에 대한 요청이 전송됩니다 (완료하는 데 시간이 걸릴 수도 있고 그렇지 않을 수도 있음). 내 프런트 엔드가 한 번에 5 개의 요청 만 보낼 수 있기를 바랍니다. 많은 컴포넌트들이 Ajax 기능을 가지고 있기 때문에, 나는 redux 스토어 내에 요청 카운터를 구현하기로 결정했다. 이 값은 fetchCount이라고하며 많은 구성 요소에서 사용자가 요청을 보낼 수 있는지 확인하기 위해이 값을 사용합니다.

이제 fetchTasks은 작업 목록에서 5 개 이상의 작업을 처리 할 수 ​​있습니다. 먼저 fetchCount이 0에 도달 할 때까지 요청을 보내서 처리 한 다음 서버 응답을 가져올 때마다 재귀 적으로 fetchTasks을 호출합니다.

function fetchTasks(taskList){ 
    return dispatch => { 
     while(taskList.length > 0 && fetchCount > 0){ // <-- I need fetchCount to be up to date with the store 
      decrementFetchCount(); //a redux action 
      let task = taskList.pop(); 
      $ajax({ 
       url: `/do/${task}`, 
       success:(data)=>{ 
       processData(data); // redux action 
       incrementFetchCount(); // a redux action 
       dispatch(fetchTasks(taskList)); 
       } 
      }); 
     } 
    } 
} 

내 문제는 내가 그 실행 시간의 어느 지점에서 fetchCount의 가치를 인식 할 fetchTasks을 필요로한다는 것입니다. 저장소에 연결하는 것이 핵심이라고 생각하지만 저장소에 함수를 연결하는 방법을 모르겠습니다. 거기에 문제가 있습니다. 또한 냄새가납니다. 다른 사람이 이것을 구현하는 다른 방법을 제안하고 싶다면 유효한 대답이 될 수도 있습니다.

Answer 1

나는 이것을 redux-thunk이라고 가정합니다. 두 번째 매개 변수 getState을 dispatch과 함께 사용할 수 있습니다. 당신 fetchTasks은 다음과 같이 보일 것이다

...

function fetchTasks(taskList) { 
    return (dispatch, getState) => { 
     while (taskList.length > 0 && getState().fetchCount > 0) { 
     ... 
    } 
}