非同期ディスパッチの正しいパターン

Question

reduxサンクを使用した非同期ディスパッチの正しいパターンですか？

//actions types 
const ADD_ARTIST = 'ADD_ARTIST' 

// action 
function AddArtist(val){ 
    return { 
    type: ADD_ARTIST, 
    payload:val 
    } 
} 


//some async events 
function async1(id){ 
    return fetch(.....) 
} 

function async2(id){ 
    return fetch(.....) 
} 

function async3(id){ 
    return fetch(.....) 
} 

function auth(id) { 
    return function (dispatch) { 
    async1(10).then((v) => dispatch(AddArtist(v))); 
    Promise.all([ 
     async2(26), 
     async3(51), 
    ]).then(
      (v) => dispatch(AddArtist(v[0] + v[1]) 
    )); 
    } 
} 


var ViewWrapper = connect(
    state => ({ 
    playlist: state.playlist, 
    artist: state.artist, 
    }), 
    dispatch => (
    { 
     dispatch, 
     auth: bindActionCreators(auth, dispatch) 
    }) 

)(View); 

とボタン：

<input type='button' onClick={() => 
this.props.dispatch(this.props.auth()) } value='dispatch mapDispatch>>>>>>>' /> 

Answer 1

redux documentationによると、これは正常に見えるが、あなたはまた、エラー処理するためにいくつかのコードを適用します。

ここにあなたが[ドキュメント]（https://redux.js.org/docs/advanced/AsyncActions.html）による

function auth(id) { 
    return ((dispatch) => async1(10) 
       ).then((v) => dispatch(AddArtist(v)) 
       ).then(() => 
       Promise.all([ 
        async2(26), 
        async3(51), 
       ]) 
      ).then((v) => dispatch(AddArtist(v[0] + v[1])) 
      ) 
    ) 
}