reduxとの対話では、非同期の例のための投稿要求

Question

のやり方について、私はサーバからデータを取得しているのを見てきました。しかし、ポストリクエストはどうですか？どうやってするか？私も、最も単純なアプローチは、ビルトインされているほとんどのブラウザでは、fetchを使用することですjquery

おかげ

Answer 1

をインポートしたくないので、私は、それを行うためにjquery.ajaxを使用したくありません。 SuperAgentのような他のより汎用性の高いオプションも調べることができます。これは必須ではあるが、jQueryよりはるかに小さいものです。あなたがサポートしたいブラウザに依存polyfill for fetchを含める必要があります覚えておいてください

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { user: {} }; 
 
    this.onSubmit = this.handleSubmit.bind(this); 
 
    } 
 
    handleSubmit(e) { 
 
    e.preventDefault(); 
 
    var self = this; 
 
    fetch('http://reqres.in/api/users', { 
 
     method: 'POST', 
 
     data: { 
 
      name: self.refs.name, 
 
      job: self.refs.job 
 
     } 
 
     }) 
 
     .then(function(response) { 
 
     return response.json() 
 
     }).then(function(body) { 
 
     console.log(body); 
 
     }); 
 
    } 
 
    render() { 
 
    return (
 
     <form onSubmit={this.onSubmit}> 
 
     <input type="text" placeholder="Name" ref="name"/> 
 
     <input type="text" placeholder="Job" ref="job"/> 
 
     <input type="submit" /> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> 
 
<div id="View"></div>

：ここで反応し、フェッチ組み合わせた基本的な例です。

Example on JSBinここでは機能しない可能性があります。