檢查http是成功還是失敗Reactjs

Question

我想問一下，如果我的組件成功或失敗的http請求，我該如何處理。我從我的動作（http）通過reducer調度數據。我想在這裏實現的是在http請求之後，如果組件會成功或失敗，它會通知我，如果http請求完成，我可以做一些其他的事情。

組件：

class BoardAdd extends React.Component { 


    addBoard(formProps) { 

     // This is where my HTTP request 
     this.props.addBoard(formProps); 

     // After I call the this.props.addBoard(formProps). I want to check if it succeeds or fail 
    } 

    render() { 

     const { error, handleSubmit } = this.props; 

     return (
      <Col lg={3}> 
       <a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal.bind(this)}> 
        <div className={[style.boardItemContainer,style.boardItemGray].join(' ')}> 
         Create New Board 
        </div> 
       </a> 

       <Modal show={this.state.boardAddModalShow} onHide={this.closeAddBoardModal.bind(this)} bsSize="small" aria-labelledby="contained-modal-title-sm"> 
        <Modal.Header closeButton> 
         <Modal.Title id="contained-modal-title-sm">Create Board</Modal.Title> 
        </Modal.Header> 
        <Modal.Body> 
         <form onSubmit={handleSubmit(this.addBoard.bind(this))}> 

          <Field name="name" component={renderField} type="text" placeholder="What are you organizing" /> 
          <button className="btn btn-primary btn-block">Submit</button> 
         </form> 

        </Modal.Body> 
       </Modal> 

      </Col> 
     ) 
    } 
} 

function mapStateToProps(state){ 
    return { 
     data: state.board.data, 
     success: state.board.success 
    }; 
} 

export default connect(mapStateToProps, { addBoard })(form(BoardAdd)); 

操作：

export function addBoard(data){ 
    return function(dispatch){ 
     axios.post(`${API_URL}/boards`, 
      { 
       name: data.name 
      } 
     ) 
     .then(response => { 
      if(response.status === 201){ 
       dispatch({ type: ADD_BOARD_SUCCESS, data: response.data.result }); 
      } 
     }) 
     .catch(function (error) { 
      console.log(error); 
     }); 
    } 
} 

減速機：

import { ADD_BOARD_SUCCESS,ADD_BOARD_FAIL} from 'constant/board.jsx'; 

const INITIAL_STATE = { 
    data: {}, 
    error_message: '', 
    success: false 
}; 

export default (state = INITIAL_STATE, action = {}) => { 
    switch(action.type) { 
     case ADD_BOARD_SUCCESS: 
      return { 
       data: action.data, 
       success: true, 
       error_message: '' 
      }; 
     case ADD_BOARD_FAIL: 
      return { 
       data: {}, 
       success: false, 
       error_message: action.error_message 
      }; 
     default: return state; 
    } 
} 

Answer 1

一種方式來通知您的組件是否是成功或失敗是讓你的行動回報一個承諾。所以，你的動作應該是這樣的：

export function addBoard(data){ 
    return function(dispatch){ 
     return axios.post(`${API_URL}/boards`, 
      { 
       name: data.name 
      } 
     ) 
     .then(response => { 
      if(response.status === 201){ 
       const result = response.data.result; 
       dispatch({ type: ADD_BOARD_SUCCESS, data: result }); 
       return result; 
      } 
     }); 
    } 
} 

然後在你的組件，你可以這樣做：

addBoard(formProps) { 

    this.props.addBoard(formProps).then((result) => { 
     console.log("Success!", result); 
    }) 
    .catch(error => { 
     console.error(error); 
    }); 
} 

你或許應該也處理catch在你的行動，如果你想派遣一個ADD_BOARD_FAIL一個錯誤，但是如果你仍想在組件中捕獲它，那麼你必須重新拋出那個錯誤。