React REDX等待來自api的數據

Question

我正在使用react和redux與axios，thunk和promise中間件做註冊表。首先，我想等待用戶列表。然後，我想檢查是否存在用戶使用該登錄名和電子郵件，如果不是發佈用戶。我有一個等待api提取完成的問題，現在不知道如何鏈接它。

操作

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