2016-08-18 29 views
2

React(15.3.0)、Redux(3.5.2)、およびreact-router(2.6.1)を使用してWebアプリケーションを構築しています。いくつかの関連記事を見てきましたが、これらのライブラリの古いバージョンを参照しています。reduxと反応ルータを使用したディープリンクへの推奨アプローチ

私は、ユーザーがそれに深くリンクできるように、URLに保持したい状態があります。ディープリンクとは、ユーザーがページの状態に直接リンクできることを意味します。私は自分のアプリでは、さまざまなページを持って、各ページは別の減速機を持って、各ページの状態はページ間で持続する必要があります。

私はダン・アブラモフの推奨アプローチをお読みになりました。How to sync Redux state and url hash tag params ページ間の持続状態を除けばOKです。

シナリオ例:ページ1の

  1. ユーザー地:/page1?state={...}

  2. ユーザーに行く:/page1

  3. ユーザーがURLに保存する状態を引き起こしてページと対話ページ2:/page2

  4. ユーザーはページ2:/page2?state={...}

  5. ユーザーはページ1にリンクしています。問題!私たちは1ページからどのように状態を回復させるのですか?

私はreact-router-reduxを見ましたが、必要なものがあるかどうかはわかりません。

この問題には一般的なアプローチがありますか?もしそうなら、それは何ですか?そうでない場合は、アプローチを提案できますか?

+0

なぜあなたはURLに状態を保存しますか? – Fantasim

+0

@Fantasimを使用して、別のユーザーがそのページを同じ状態で表示できるようにリンクを共有することができます。 –

+1

なぜ、Page1についてのメインコンポーネントのcomponentWillMountのURLを解析せず、レデューサーにデータを送信するアクションを作成しますか? – Fantasim

答えて

2

これには複数の回答があると確信しています。それを選択して実装するだけです。

それは私だったら、私はこれを行うだろう:

  1. 状態
  2. のための真実の単一のソースは、いくつかの方法(おそらくReduxのミドルウェア)に格納して更新を購読としてReduxのストアを使用しますページ1の関連する状態が変更されたときのURLパラメータ
  3. ユーザーが/page1を訪問した場合、保存された状態を使用します(サーバーを保存/復元するには状態を同期する必要があると仮定しています)。
  4. ユーザーが/page1?state={...}を訪問した場合、a)URL状態を保存/回復状態にマージするか、またはb)回復をスキップしてURLを直接使用します。

私は、ユーザーがページをブックマークすることを頼りにしていない限り、無駄な努力のように思えるので、さらに進んでURLに状態を同期させません。 「このURLを共有する」というReactコンポーネントをレンダリングし、適切なクエリパラメータを持つURLをレンダリングさせるだけです。

+0

これは、ミドルウェアの代わりに 'store.subscribe'を使い、URLを使ってストアを同期させたのとは別に解決しました。ありがとう! –

関連する問題