apiからデータを待っている反応が遅い

Question

私は反応と還元をaxios、thunk、約束のミドルウェアを使って登録しています。まず、ユーザーのリストを待っています。それから私はそのログインと電子メールを持つユーザーが存在しない場合に存在するかどうかを確認したい。私は完了するためにフェッチするのを待つことに問題があり、実際にこれをどのようにチェーン化するべきではありません。

アクション

export function fetchUsers(){ 
    return function(dispatch){ 
    dispatch({type:"FETCH_USERS"}); 
    axios.get(url) 
     .then((response) => { 
     dispatch({type:"FETCH_USERS_FULLIFILED", payload: response.data}); 
     }) 
     .catch((err) => { 
     dispatch({type:"FETCH_USERS_ERROR", payload: err}); 
     }) 
    } 
} 

export function postUser(body){ 
    return function(dispatch){ 
    dispatch({type:"POST_USER"}); 
    axios.post(url, body) 
     .then((response) => { 
     dispatch({type:"POST_USER_FULLFILED", payload: response.data}); 
     }) 
     .catch((err)=>{ 
     dispatch({type:"POST_USER_ERROR", payload: err}) 
     }) 
    } 
} 

私は、ユーザーのリストを取得し、ユーザーが送信ボタンをクリックされたときにチェックしたいです。私はthen()方法

this.props.dispatch(fetchUsers()).then(()=>{ 
//checking my conditions 
// if all is ok 
this.props.dispatch(postUser(body)) 
}) 

Answer 1

なぜあなたはよりapiをトリガーする方法からactionsを分離されていませんが存在しないことの原因のような何かを傾けますか？

PromiseをfetchUsers()とpostUser()に設定すると、api関数から約束を簡単に管理できます。これを確認してください：

// Api promise function. 
export function fetchUsers(){ 
    return new Promise ((resolve, reject) => { 
    axios.get(url) 
     .then((response) => { 
     resolve(response.data); 
     }).catch((err) => { 
     reject(err); 
     }) 
    }) 
} 
// Api promise function. 
export function postUser(body){ 
    return new Promise ((resolve, reject) => { 
    axios.post(url, body) 
     .then((response) => { 
     resolve(response.data); 
     }).catch((err) => { 
     reject(err); 
     }) 
    }) 
} 

// Actions file. 
// todo: integrate the next code into your action function. 
let dispatch = this.props.dispatch; 
dispatch({type:"FETCH_USERS"}); 
fetchUsers().then(allUsersFetched => { 
    dispatch({type:"FETCH_USERS_FULLIFILED", payload: allUsersFetched}) 
    //checking your conditions 
    // if all is ok 
    dispatch({type:"POST_USER"}); 
    postUser(body).then(user => { 
    dispatch({type:"POST_USER_FULLFILED", payload: user}); 
    }).catch(err => { 
    dispatch({type:"POST_USER_ERROR", payload: err}) 
    }) 
}).catch((err) => { 
    dispatch({type:"FETCH_USERS_ERROR", payload: err}); 
})