2017-11-17 3 views
0

Bitte helfen Sie mir, ist es korrektes Muster für Async-Versand mit Redux Thunk?Korrektes Muster für Async-Versand

//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); 

und Knopf:

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

nach [Dokumentation] (https://redux.js.org/docs/advanced/AsyncActions.html) schreiben, das richtig aussieht. aber Sie müssen auch Fehlerbehandlung. –

Antwort

1

nach redux documentation, das sieht gut aus, aber auch einige Codes anwenden Umgang mit der Fehlerbehandlung.

hier kann man den besseren Weg

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])) 
      ) 
    ) 
} 
+0

danke für deine antwort – zloctb