フェッチアクションでストアからデータを使用する方法（react-redux）

Question

セカンドフェッチで最初にデータを使用する場合、フェッチチェーン非同期アクションを作成するにはどうすればよいですか？私はリポジトリリスト（GitHub API）を取得し、それらのリポジトリからユーザを取得する必要があります。私はこれを作った：

export function reposListFetchData(url) { 
    return (dispatch) => { 
    dispatch(reposListIsLoading(true)) 

    fetch(url) 
     .then((response) => { 
     if(!response.ok){ 
      throw Error(response.statusText) 
     } 

     dispatch(reposListIsLoading(false)) 

     return response 
     }) 
     .then((response) => response.json()) 
     .then((repos) => dispatch(reposListFetchSuccess(repos))) 
     .then(this.props.repos.map(
    repo=>this.props.fetchContributorsData(`https://api.github.com/repos/angular/${repo.name}/contributors?per_page=100`) 
    )) 
    .catch(()=> dispatch(reposListHasErrored(true))) 
    } 
} 

もちろん、私はthis.propsを使用することはできません。助言がありますか？

Answer 1

fetchContributorsDataがreposListFetchDataと非常に似ている行動であると仮定すると、あなたがこれを行うことができるはず...

export function reposListFetchData(url) { 
    return dispatch => { 
    dispatch(reposListIsLoading(true)); 
    fetch(url) 
     .then(response => { 
     if (!response.ok) { 
      throw Error(response.statusText); 
     } 
     dispatch(reposListIsLoading(false)); 
     return response; 
     }) 
     .then(response => response.json()) 
     .then(repos => { 
     dispatch(reposListFetchSuccess(repos)); 
     // where repos is an array of repo 
     repos.map(repo => 
      dispatch(fetchContributorsData(`https://api.github.com/repos/angular/${repo.name}/contributors?per_page=100`)) 
     ); 
     }) 
     .catch(() => dispatch(reposListHasErrored(true))); 
    }; 
}