reactjs - Flux/React Complex 再利用可能なコンポーネント

Question

私はこのようなことをしたい

var App = React.createClass({
    render: function() {
        return (
            <CountryAutoComplete />
        )
    }
});

別のアプリ

var App2 = React.createClass({
    render: function() {
        return (
            <CountryAutoComplete />
        )
    }
});

これは単純なオートコンプリートです（ファイル全体ではありません）

var AutoComplete = React.createClass({
    componentDidMount: function() {
        $(this.getDOMNode()).typeahead(this.props);
    },
    render: function() {
        return (
            <input type="text" class="typeahead" onChange={this.props.onChange} />
        );
    }
});

CountryAutoComplete は、このような自己完結型になります。

var CountryAutoComplete = React.createClass({
    search: function(country, process) {
        // Make an ajax call and return the data. No other components needed
        $.ajax({
            url: '/country' + '?search=' + country
        }).then(process);
    },
    render: function() {
        return (
            <AutoComplete onChange={this.props.onChange} source={this.search} />
        );
    }
});

Flux docs に基づいて、API 呼び出しを使用するものはすべて、

アクション -> API -> ディスパッチャー -> ストア -> コンポーネント

これにより、CountryAutoComplete が特定のアプリに関連付けられます。これは、アクション、Dispatcher、およびストアがアプリに固有であるためです。このコンポーネントを複数のアプリで再利用できるようにする最善の方法は何ですか?