httpが成功したか失敗したかを確認するReactjs

Question

私のコンポーネントで成功した、または失敗したHTTPリクエストがどのように処理されるかを質問したいと思います。私は自分の行動（http）から減速器を通してデータを送る。私がここで達成したいのは、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); 
    }); 
} 

あなたがADD_BOARD_FAIL上を派遣したい場合は、おそらくも、あなたのアクションでcatchを処理する必要がありますエラーが発生しますが、それでもコンポーネントでエラーをキャッチしたい場合は、エラーを再現する必要があります。