問題タブ [react-router]

React を react-router および Reflux と共にデータストアとして使用していますが、ページの更新を許可するために永続性を処理する最善の方法がわかりません。

私のコンポーネントは Reflux.connect を使用してストアに接続しますが、ストアはバックエンドからデータを取得するため、コンポーネントが最初に初期化およびレンダリングされるときはまだ使用できません。

ユーザーが最初からアプリに入ると、このすべてのデータが順番に読み込まれ、必要なときに利用できるようになりますが、ルートをさらに下ってページの更新をトリガーすると、react は、そうでないデータに依存するコンポーネントをレンダリングしようとします。まだあります。

LocalStorage に常にデータのコピーを保持し、それを Reflux ストア getInitialState() から提供することでこれを解決し、すべてのコンポーネントがレンダリング前にデータを取得できるようにしました。

これが正しい方法なのだろうか。何らかの理由でローカル ストレージ データが消去されたり破損したりすると、コンポーネントが正しいデータにアクセスできないため、インターフェイスが空白になります。サブ構造とプロパティが存在せず、javascript エラーが発生します。面倒で信頼できない解決策のようです。

これを解決するためにどのようなパターンが使用されているか知りたいです。

------編集----- WiredPrairieのコメントに答えるには：

1) getInitialState でデータを使用してコンポーネントを初期化するのはなぜですか?

私のコンポーネントが Reflux.connect を使用する場合、ストアがデータを取得する必要があるため、最初のレンダリングではまだデータが状態にありません。私のビューは現在、未定義のデータでは適切に機能しません。getInitialState() で Reflux ストアからローカルに保存されたキャッシュを返すことにより、接続されているすべてのコンポーネントは、最初のレンダリング呼び出しの前にそのデータを取得します。

2) ページが更新される原因と、最初と同じようにデータをロードできないのはなぜですか?

これは主に、編集時にページを更新する livereload を回避するために構築しなければならなかった回避策ですが (後で react-hotloader の使用を検討しますが、まだオプションではありません)、ユーザーはネストされたビューのどこかにいるときに更新を押すこともできます。それは同じ効果があります。手動で更新すると、開始時にアプリに入っていません。

3) コンポーネントがストアの変更イベントに関連付けられている場合、コンポーネントが更新されないのはなぜですか?

それらは更新されますが、私が言ったように、彼らは現在空のデータを処理しておらず、最初のレンダリングで、ストアが何かを取得するのを待ってそれを見逃すでしょう. すべてのビューを空のデータで正常に動作させることはできますが、それでは多くのボイラープレート コードが追加されます。

これまでの回答から、私が localStorage で行っていることは一般的な方法であると感じています。localStorage や sessionStorage などにローカルにキャッシュし、更新直後にそのデータを提供します。

localStorage が適切に機能しないという奇妙な機会に空のデータを適切に処理することで、ビューをもう少し堅牢にする必要があります。

現在、react / react-router を使用したサーバー側のレンダリングで奇妙な問題が発生していますが、これは単に理解できません。トランスパイルにBabel（6to5）でES6を使用しています

Server.js スニペット

Routes.js

出力

CONTENT はレンダリングされたコンポーネントを正しく出力します

CONTENT2 出力<noscript></noscript>

何らかの理由で、外部ファイルからルートをインポートすると (クライアント コードとサーバー コードの両方でルートを要求できるようになります)、サーバー側のレンダリングで正しい HTML が出力されません。

React todomvc 1からわかるように、UI がモデルに合わせて最新の状態に保たれるようにする 1 つの方法は、UI がすべての変更でレンダリングされるように、(以下に示すように) モデルを render 関数にサブスクライブさせることです。

アプリで React ルーターを使用する場合、このデモで示されているように、React.render 呼び出しをルーターでラップする必要があります。

では、モデルも更新する必要がある場合、Router をどのように使用しますか? React.renderつまり、ルーターとfunction render?の両方をラップする方法です。これにより、スコープに問題が生じます

I am trying to build a parallax website with react and react-router

In most react-router examples I found, target dom node is replaced with Handler corresponding to the route.

How can I render all the route handlers into single page and jump to specific location in a page with react-router ?

ES6 構文を ES5 に変更するだけで、ローカル マシンでReact-Router の例https://github.com/rackt/react-router/tree/master/examplesのいずれか (およびすべて) を実行しようとすると、同じエラーが発生し続けます同じコード行から生じる

コード

エラー

ES6 を使用して依存関係を宣言し、Router を分解する代わりに、例について何も変更していません。

インデックスにjsファイルへのリンクを含め、ルーターに対してこれを行いました

これは、 github からここに貼り付けられた ES5 バージョンのコードを使用した jsfiddle です。

これは、私が作業しようとしているES5/6の変更を含む完全なコードです

AJAX リクエストが不正な応答で返されたときに、ユーザーが次のような不正なページに送信されるようにしたいと考えています。

ミックスインを使用できることは知っていますがNavigation(これはまもなく削除されます)、特定のコンポーネントに関連付けられていないグローバル エラー ハンドラを作成するにはどうすればよいでしょうか?