問題タブ [react-router-redux]

ドキュメントによると、LOCATION_CHANGEを呼び出すことでイベントを発生させることができるはずpush('/with/the/path')です。ドキュメントの例:

ただし、プッシュを呼び出すと、次のようになります (何もしていないように見えます)。

私は何が欠けていますか？

わかりましたので、ミドルウェアと redux の applyMiddleware と react-router-redux の routerMiddleware を理解するのに苦労しています。誰かが私にそれが正確に何であるかを簡単な言葉で説明できますか. ありがとうございました。

Redux と React Router を使用するユニバーサル React アプリがあります。私のルートの一部には、クライアント上で AJAX リクエストをトリガーして表示用のデータをハイドレートするパラメーターが含まれています。サーバーでは、これらのリクエストを同期的に処理し、最初のリクエストでレンダリングできます。

私が直面している問題は次のとおりです。componentWillMountルーティングされたコンポーネントでライフサイクル メソッド (例: ) が呼び出されるまでに、最初のレンダリングに反映される Redux アクションをディスパッチするには遅すぎます。

これは、サーバー側のレンダリング コードの簡略図です。

ルート.js

サーバー.js

コンポーネントがサーバー上にFooViewContainer構築されると、最初のレンダリングの小道具はすでに修正されています。ストアにディスパッチするアクションは、 への最初の呼び出しにはrender()反映されません。つまり、ページ リクエストで配信されるものには反映されません。

idReact Router が渡すパラメーターは、それ自体では最初のレンダリングには役立ちません。その値を適切なオブジェクトに同期的にハイドレートする必要があります。この水分補給はどこに置けばいいですか？

render()1 つの解決策は、サーバー上で呼び出される場合に、メソッド内にインラインで配置することです。1) 意味的に意味がなく、2) 収集したデータがストアに適切にディスパッチされないため、これは明らかに間違っているように思えます。

私が見た別の解決策fetchDataは、Router チェーンの各コンテナ コンポーネントに静的メソッドを追加することです。たとえば、次のようなものです。

FooViewContainer.js

サーバー.js

これよりも良いアプローチがあるに違いないと感じています。それはかなり洗練されていないように見えるだけでなく (.WrappedComponent信頼できるインターフェイスですか?)、高次のコンポーネントでは動作しません。ルーティングされたコンポーネント クラスのいずれかがこれ以外のものによってラップされている場合connect()、動作が停止します。

ここで何が欠けていますか？

前後の機能を備えたページネーションを実装しようとしていますが、問題は遷移間の状態を維持し、ナビゲーションで復元する方法ですか?

次の方法でreact-routerでそれを達成しようとしていました：

検索結果コンポーネント

次に、リデューサーで：

}

問題は、SearchResult コンポーネントが開始されたときに、サーバーからのデータがまだ利用できないため、空の配列が現在の場所の状態として保存されることです。

それを解決する方法についてのアイデアを事前にありがとう。

ルートの onEnter や onChange フックでパスを変更すると、url が無限に変わるようです。しかし、子ルートのパスを変更すると機能します。実際には、認証を 1 か所で処理したいのですが、それ以外の場合は、すべての子ルートが同じロジックを処理する必要があります。

(React、 React-Router、React-Aria-Modalの最新バージョンを使用しています)

Pinterest や Product Hunt で見られるようなルーティング動作を作成しようとしています。なじみのない人のために説明すると、プレビュー モードでモノのフィード (ピン、製品など) を持つことになります。そのプレビューで名前または「もっと見る」リンクをクリックすると、モノがモーダルで開き、それに応じてルートが変更されます。その URL をコピーして貼り付けるか、ページを更新すると、Thing はページのようにレンダリングされます。

そのため、「View More」Linkコンポーネントで状態 (ビュー = モーダル) を設定し、Thingコンポーネントでモーダルでレンダリングするかどうかを確認します。

したがって、本質的に：

内ではThing、おおよそ次のようになります。

モーダルが表示されているときにリンクをクリックするとページの背景が消えるという問題が発生しました。これは、リンクをクリックすることによるナビゲーションによるものだと思います。

React-Router には、これを解決するこのような例がありますが、いくつかの問題もあります。それらは基本的に前の子をレベルに保存Appし、要求されたモーダル/ルートに加えてそれをレンダリングするようです-本質的に、パフォーマンスもクリーンでもないフィード全体の再レンダリングを引き起こします。

さらに、「次/前」スタイルの対話が設定される場合、「次/前」をクリックしてルーターの状態が更新されるたびにバックグラウンド全体が読み込まれるように見えますが、これも不要に感じます。

前のページが引き続きバックグラウンドで表示され、ルートも更新されるように、これを設定することについてどのように考えるのが最善かを考えています。

どんな考えでも大歓迎です！

createStore で初期状態を渡そうとしていますが、コンソールにエラー/警告が表示されています。

Unexpected key "blogList" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "routing". Unexpected keys will be ignored.

このエラーに加えて、ストア状態の初期データを取得できません。ドキュメントから:

[initialState] (any): 初期状態。必要に応じて、ユニバーサル アプリでサーバーから状態をハイドレートしたり、以前にシリアル化されたユーザー セッションを復元したりするために指定できます。CombineReducers を使用してレデューサーを作成した場合、これは、渡されたキーと同じ形状のプレーン オブジェクトである必要があります。それ以外の場合は、レデューサーが理解できるものは何でも自由に渡すことができます。

私が欠けているものはありますか？私は今のところ状態を記録しています。そしてそれは今起こっていません。これらのビデオを参照して、ここで redux を学びました。

これが私の店舗コードです:

ルートレデューサー :

ブログリストリデューサー:

PS : React Router を redux と共に使用しています。反応開発ツールから store.getState のルーティングを確認できます。