Backbone.MarionetteアプリをReactに置き換えようとしていますが、クエリパラメータについて考えるのが困難です。私はこのパターンを理解する上で本当に単純な平和を逃していると思うので、この質問がまったくナンセンスであるならば、私は謝罪します。何かサポートをいただければ幸いです。または、より具体的にグーグルできる方向を示していただければ幸いです。
/usersユーザーを一覧表示するページがあり、検索バーを介してユーザーをフィルタリングできます。したがって、ユーザー名に「joe」を含むユーザーをフィルタリングする場合は、のようなクエリパラメーターを使用してサーバーにリクエストを送信します/users?username=joe。さらに、pageパラメータを追加することでページ付けすることもできます（/users?username=joe&page=1）。
機能性だけを考えれば、流れはおそらく
joeは入力要素に挿入し、[検索]をクリックします。Action（Action.getUserなど）が起動します。Actionサーバーへの要求を行い、その結果を受け、Dispatcher人（通常はStore）に、結果ペイロードを含む関数をディスパッチしますAction。Storeで受信された新しい結果の状態が変化ActionComponent）は、Storeの変更をリッスンして再レンダリングします。そしてそれは期待通りに動作します。ただし、クライアントが現在フィルタリングされた結果をブックマークして、しばらくしてから同じページに戻ることができるようにしたいと思います。これは、クライアントが作成した検索用語に関する明示的な情報をどこかに保存する必要があることを意味します。これは通常、URLです（私は正しいですか？）。したがって、検索語（/users?username=joe&page=1）を保存するには、クエリパラメータを使用してURLを更新する必要があります。
私が混乱しているのは、いつどこでURLを更新するかです。私が今思いつくことができるのは、以下の2つのオプションです-そしてそれらはまったくきれいではないようです。
joeは入力要素に挿入し、[検索]をクリックします。/users?username=joe&page=1）を使用してReactRouterの遷移が発生します。Component）は、this.props.paramsおよびを介して新しいパラメータを受け取りthis.props.queryます。Component）は、受け取ったクエリパラメータに応じてAction同様に起動Action.getUserします-この場合はusername=joe&page=1。この後は上記と同じです
joeは入力要素に挿入し、[検索]をクリックします。Action（Action.getUserなど）が起動します。Actionサーバーへの要求を行い、その結果を受け、Dispatcher人（通常はStore）に、結果ペイロードを含む関数をディスパッチしますAction。Storeで受信された新しい結果の状態が変化ActionComponent）は、Storeの変更をリッスンして再レンダリングします。そして、どういうわけか（私はまだ方法がわかりません）、props（、、this.props.searchusernameなどthis.props.searchpage）に応じてURLを更新しますクエリパラメータを処理するためのベストプラクティスは何ですか？（または、これはクエリパラメータに固有ではない場合があります）デザインパターンまたはアーキテクチャを完全に誤解していますか？よろしくお願いします。
私が読んだいくつかの記事
意味がよくわからない
これは、情報を保存するために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が再読み込みされ、正しい結果が表示されます
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加