エクスプレスサーバーからのデータをビューに返信するにはどうすればよいですか？

Question

私はorientdbデータベースに接続している簡単なエクスプレスサーバーを持っています。 エクスプレスビューから反応ビューに情報を渡す必要があります。 は例えば、急行に私が持っている：

router.get('/', function(req, res, next) { 
    Vertex.getFromClass('Post').then(
    function (posts) { 
     res.render('index', { title: 'express' }); 
    } 
); 
}); 

ので、この例では、私は、私の反応インデックスコンポーネントにcomponenentの状態を設定するためのposts変数を持っている必要があります。 （私はフロント側でのみ反応し、サーバ側では反応しません）

class IndexPage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     posts: [] 
    }; 
    } 

    render() { 
    return (
     <div> 
     <Posts posts={posts} /> 
     </div> 
    ); 
    } 
} 

反応の記事を急行から得るにはどうしたらいいですか？

私はおそらくリアクションからajaxリクエストを行うことができますが、それは最善の方法ではないと私は思っています。

たとえば、socket.ioを使用してリアルタイムでその投稿を取得する必要がある場合は、どのような違いがありますか？

PD：エクスプレスでは、ハンドルバーやホーガンのようなテンプレートエンジンを使用する可能性があります。このテンプレートエンジンは、このトピックで役立ちますか？

ありがとうございました！

Answer 1

私はあなたの最善の選択肢は、実際にクライアントから何らかのネットワーク要求をすることだと思います。あなたはシンプルなアプリを維持することを目指しおよび状態管理ライブラリ（例えばReduxのを）したくない場合は、あなたが

class IndexPage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     posts: [] 
    }; 
    } 

    componentDidMount() { 
    fetch('/') // or whatever URL you want 
     .then((response) => response.json()) 
     .then((posts) => this.setState({ 
     posts: posts, 
     }); 
    } 

    render() { 
    return (
     <div> 
     <Posts posts={this.state.posts} /> 
     </div> 
    ); 
    } 
} 

ような何かを行うことができ、あなたのresponse記事コレクションのJSON表現があるはずです。

renderメソッドにもアクセスし、postsにアクセスすることにも注意してください。

Fetch APIの詳細についてはMDNを参照してください（古いブラウザの場合はpolyfillが必要です）。

EDIT： socket.ioの場合は、そのインスタンスをどこかに保存してコンポーネントの小道具として渡します。次に、あなたは何かをすることができます

class IndexPage extends React.Component { 
    ... 
    componentDidMount() { 
    this.props.socket.on('postReceived', this.handleNewPost); 
    } 
    handleNewPost = (post) => { 
    this.setState({ 
     posts: [ 
     ...this.state.posts, 
     post, 
     ], 
    }); 
    } 
    ... 
} 

サーバー側の部分は、たとえばSocket.io Chat exampleを参照してください。