代理人または代理店でAJAXを呼び出す

Question

以下のコードでわかるように、私のajax（私はfetchを使用しています）は、AppSearch関数内のAppコンポーネントにあります。どのように私は委任し、独自のコンポーネントでajax呼び出しを行うことができますか？私は角度1から来て、サービスや工場のようなものがありますが、私はそれをどのように反応させるのか分かりません。

const App = React.createClass({ 
    getInitialState() { 
    return { 
     username: '', 
     profiles: [], 
     noUser : false 
    } 
    }, 
    handleInputChange(e) { 
    this.setState({ 
     username: e.target.value 
    }) 
    }, 
    handleSearch() { 
    if (!this.state.username) { 
     alert('username cannot be empty'); 
     return false; 
    } 
    fetch('https://api.github.com/search/users?q=' + this.state.username) 
     .then(response => { 
     return response.json() 
     }).then(json => { 
     this.setState({ 
      profiles: json.items 
     }) 

     if(json.items.length === 0){ 
      this.setState({noUsers : true}); 
     }else{ 
      this.setState({noUsers : false}); 
     } 
     }) 
    }, 
    render() { 
    return (
     <div> 
      <input type="text" placeholder="Github username" onChange={this.handleInputChange} value={this.state.username} /> 
      <button onClick={this.handleSearch}>Search</button> 
      {this.state.profiles.length > 0 && 
       <Users profiles={this.state.profiles} /> 
      } 
      {this.state.noUsers && 
       <p>No users found.</p> 
      } 
      </div> 
    ) 
    } 
}); 

http://codepen.io/eldyvoon/pen/ENMXQzこのコードでは、多くのリファクタリングが必要です。

Answer 1

Reactのすべてがコンポーネントである必要はありません。それはまだ本質的に平凡な古いJavascriptの下にあります。 APIロジックを自身のモジュール/ファイルに抽出します。

GithubApi.jsその後、

module.exports.getUsers = function(username) { 
    return fetch('https://api.github.com/search/users?q=' + username) 
    .then(response => { 
    return response.json() 
    }) 
} 

そして、それを必要とするこれまでのところ、それを使用します。

var GithubApi = require('/path/to/GithubApi.js'); 

const App = React.createClass({ 
    .. 
    .. 
    handleSearch() { 
    if (!this.state.username) { 
     alert('username cannot be empty'); 
     return false; 
    } 
    GithubApi.getUsers(this.state.username) 
     .then(json => { 
     this.setState({ 
      profiles: json.items 
     }) 

     if(json.items.length === 0){ 
      this.setState({noUsers : true}); 
     }else{ 
      this.setState({noUsers : false}); 
     } 
     }) 
    }, 
    .. 
    .. 

これは一例です - あなたはあなたのモジュールを設計する方法はあなた次第です特定の方法や柔軟な方法などに依存します。

Answer 2

独自のReactコンポーネントに書き込む必要はありません。プレーンな古いJavascriptのCommonJSモジュールを作成し、require（）経由で読み込んだり、小道具として渡したりしてください。