web-dev-qa-db-ja.com

react + react-router + fluxでクエリパラメーターを処理する方法

Backbone.MarionetteアプリをReactに置き換えようとしていますが、クエリパラメーターについて考えるのが困難に直面しています。質問は全くナンセンスです。どんなサポートも感謝するか、もっと具体的にグーグルで検索できる方向を示してください。

ユーザーを一覧表示する/usersページがあり、検索バーでユーザーをフィルタリングできます。そのため、ユーザー名に「joe」を含むユーザーをフィルタリングする場合は、/users?username=joeなどのクエリパラメーターを使用してサーバーにリクエストを送信します。さらに、pageパラメーター（/users?username=joe&page=1）を追加することでページ分割することもできます。

機能だけを考えれば、フローはおそらく

  1. クライアントはjoeを入力要素に挿入し、Searchをクリックします。
  2. Searchボタンをクリックすると、Action（Action.getUserなど）が起動します。
  3. Actionはサーバーにリクエストを行い、結果を受け取ります
  4. Dispatcherは、Storeに関心がある人（通常はAction）に結果ペイロードを持つ関数をディスパッチします。
  5. Storeの状態は、Actionが受け取った新しい結果で変化します
  6. ビュー（Component）は、Storeの変更をリッスンして再レンダリングします。

期待どおりに機能します。ただし、クライアントが現在のフィルター処理された結果をブックマークして、しばらくしてから同じページに戻ることができるようにしたいと思います。これは、クライアントが作成した検索用語に関する明示的な情報を保存するためにどこかが必要になることを意味します。通常、これはURLです（そうですか？）。そのため、検索用語（/users?username=joe&page=1）を保存するには、クエリパラメーターでURLを更新する必要があります。

私が混乱しているのは、いつどこでURLを更新するのですか？私が今思いつくことができるのは、以下の2つのオプションです-そして、それらはまったくきれいではないようです。

オプション1

  1. クライアントはjoeを入力要素に挿入し、Searchをクリックします。
  2. Searchボタンをクリックすると、新しいクエリパラメーター（/users?username=joe&page=1）でReactRouterの遷移が起動します。
  3. ビュー（Component）は、this.props.paramsおよびthis.props.queryを介して新しいパラメーターを受け取ります。
  4. ビュー（Component）は、受信するクエリパラメーターに応じてAction.getUserのようなActionを起動します。この場合はusername=joe&page=1です。

この後、上記と同じです

オプション2（6つだけが上記で説明したものと異なります）

  1. クライアントはjoeを入力要素に挿入し、Searchをクリックします。
  2. Searchボタンをクリックすると、Action（Action.getUserなど）が起動します。
  3. Actionはサーバーにリクエストを行い、結果を受け取ります
  4. Dispatcherは、Storeに関心がある人（通常はAction）に結果ペイロードを持つ関数をディスパッチします。
  5. Storeの状態は、Actionが受け取った新しい結果で変化します
  6. ビュー（Component）は、Storeの変更をリッスンして再レンダリングします。 そして、どういうわけか（まだわかりません）props（this.props.searchusernameやthis.props.searchpageなど）に応じてURLを更新します

クエリパラメータの処理のベストプラクティスは何ですか？ （または、これはクエリパラメータに固有ではない場合があります）デザインパターンまたはアーキテクチャを完全に誤解していますか？あらゆるサポートに感謝します。

読んだ記事

reactjsfluxreact-router
24
kenfdev

あなたが何を意味するのか完全にはわからない

これは、情報を保存するためにURLを更新する必要があることを意味します（/ users？username = joe＆page = 1）。

おそらくこれと同様の構造になります。

TopContainer.jsx-Users.jsx-User.jsxのリスト

通常、TopContainerはすべてのストアを監視し、何か変更があった場合は、users.jsxに渡します。このようにして、Users.jsxでは、再レンダリングを心配することなく、this.props.usersを単純にレンダリングできます。

ユーザーの検索アクションは通常、TopContainerのcomponentWillMountイベントで発生し、ページはUserStoreをリッスンします。これは、クエリパラメータを投入するのに適した場所です。このような何かが動作します

  componentWillUnmount() {
    let searchTerm = router.getCurrentQuery().searchTerm;
    UserActions.searchUsers(searchTerm)
  },

このページは、URLにクエリパラメータがあるかどうかを実際に気にしません。ユーザーストアにあるものは何でもありません。

その後、検索が終了すると、Users.jsxがリロードされ、正しい結果が表示されます

1
yujingz

ロケーションクエリ（ユーザー名）のみを設定する送信ボタンをベストプラクティスと見なします。残りは、ルータコンポーネントとして割り当てられているメインのリアクションコンポーネントによって処理される必要があります。これにより、URLを再訪したり共有したりしても、同じ結果が得られることを確認できます。これも非常に一般的です。

このようなもの：

let myQuery = this.props.location.query;
if (myQuery.username) {
  let theUser = myQuery.username;
  this.setState({
    userName = myQuery.username
  });
} else {
  this.setState({
    userName = false //Show All
  });
}

そして、この状態「userName」を使用して、検索するサーバーに送信します。この方法により、サーバーはすでに関連データを送信しているため、ユーザーのリストを処理するコンポーネントのコードを繰り返す必要はありません。

Reactでロケーションクエリを使用した経験では、反応性サイクルとパフォーマンスに非常に満足しています。 URLに関連するすべての異なるアプリの状態を維持することを強くお勧めします。

2
Emo