Question

我正在使用react和redux与axios，thunk和promises中间件进行注册表单。首先，我想等待用户列表。然后我想检查如果没有发布用户，是否存在具有该登录和电子邮件的用户。我有一个等待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

为什么不将actions与触发api的方法分开？

您可以将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});
})

React redux等待来自api的数据

1 个答案: