2017-09-06 3 views
1

私はテーブルを持つReact JSページを持っています。次のように私の要件は次のとおりです。Webソケットの更新を受信するとReactコンポーネントをリロードする方法はありますか?

  • ロードテーブルを(表を反応させるの使用)、データAPIを呼び出して、テーブル
  • スタートクライアント側のWebソケット接続を移入し、任意の更新について聞く
  • ザ・データベースにエントリが追加されたときにWebSocketサーバーが更新(イベント)を送信するため、Data APIを呼び出して更新情報を取得する必要があります。
  • Web経由での更新ソケットを使用するには、テーブル・コンポーネントを再度ロードして、新しいデータで表を作成するData APIへのAPI呼び出しを行う必要があります。今

私の実装は次のとおりです。

  • 、テーブルをロードAPIを呼び出して、テーブルに
  • オープン用WebSocketを移入し、任意の更新について聞きます。
  • イベントとして更新を受け取ると、私はAPIを再度呼び出してテーブルをリロードします。

ImはReactとhaventのみを使用して状態管理に使用します。上記の方法は機能しますが、これは唯一の方法か上記を実装するためのより良い方法があるかどうかを知りたいですか?

+0

あなたのアプローチは実行可能です。初期APIコールで状態を設定し、状態が小道具として渡されるコンポーネントをレンダリングします。更新イベントを受け取った場合、新しいデータでコンポーネントを再レンダリングする状態を更新すると、別の要求が行われます。 Reduxもお手伝いできます。それは、ネットワーク関連のものすべてからあなたのコンポーネントを分離することができますが、あなたのアプリが単純なものなら、それを使用する必要はありません。私が助けることができることを願って:) –

答えて

1

どのくらいのデータが変更されるのか、あなたのプラットフォームを使用するユーザーの数は自分自身に尋ねるのがよいでしょう。これらの数値が大きくなるにつれて、リクエストでAPIに過負荷をかけたくないため、実装が変更される可能性があります。

過去のプロジェクトでは、私はReact/ReduxでWebソケットを使用していて、同じパスをたどっていましたが、うまくいっていて、おそらくあなたが得ようとする最高のものです。

あなたのアプローチのもう一つの選択肢は、websocket update関数とともにテーブルに追加されたデータを送信することで、データベースをもう一度呼び出す必要はありません。私は、あなたがやっていることではなく、メッセージングプラットフォームのためのより良い解決策だと言います。しかし、これはまた、多くのユーザーが頻繁にこれらの更新プログラムを入手している場合には、APIへの負荷をより適切に管理できるため、良いアプローチになる可能性があります。

実行可能なものではありますが、必要に応じて簡単に変更できる状態にしておいてください。

関連する問題