2017-05-25 7 views
0

私は大きなReact Appで働いています。私の最上位レベルの親コンポーネントでは、Fluxのアクションディスパッチを通じていくつかの情報(ログインサービスからのユーザデータ)をローカルストレージに追加しています。そのアクションがディスパッチされると、残りのアプリケーションがレンダリングされますが、一部のコンポーネントの表示はローカルストレージ内のそのデータのステータス(つまりユーザーの読み取り許可)に依存します。これは、サーバーサイドでも検証されます。これらのコンポーネントを作成するためにデータを収集するためにクエリを実行すると、最も効率的な方法でレンダリングしたいだけです。LocalStorageから項目を追加および取得する際に待ち時間はありますか?

パーミッションデータを追加するアクションがディスパッチされるまで、これらのコンポーネントはレンダリングされないため、パーミッションデータが子コンポーネントのコンストラクタ/ componentWillMountのローカルストレージから読み取ることができると仮定できますか?または、ローカルストレージへの書き込みとその読み込みの間に潜在的な遅延を処理する必要がありますか?

編集: 以下のコメントに従って、私はその問題を解決する代わりにStoreにユーザー権限を保存できます。

しかし、ユーザーに応じて変更できるログインサービスからのAPIのURIも取得します。このURIは、子コンポーネントがマウントされたときに送出されるアクションによって呼び出される関数のajax呼び出しに使用されます。これはステートのコンポーネントではなく静的なエンティティなので、ローカルストレージはストアを介してこれを保持する方が良いようです。したがって、上記のレイテンシの問題はまだこの側面を表しています。子コンポーネントがマウントされ、ajax呼び出しがトリガーされるとすぐに、ローカルストレージからURIを読み取ることができると想定するのは安全でしょうか?または潜在的な待ち時間に対処する必要がありますか?

+1

_一部のコンポーネントの可視性は、ローカルストレージ内のそのデータのステータスに依存します._これはReact/Reduxでは間違ったアプローチです。コンポーネントは、Reduxストア**のデータにのみ依存する必要があります**。ローカルストレージに直接依存しません!ローカル・ストレージにストア・データをシリアル化する場合は、ストアの変更をサブスクライブするか、ミドルウェアを使用する必要があります。詳細については、[この回答](https://stackoverflow.com/a/35675304/2118955)を参照してください – hindmost

+0

ありがとう、それは、アクセス許可とビューレイヤーを処理するより良い方法です。しかし私はいくつかのさらなる問題があり、私の質問はまだ彼らのために立っていると思う、私の編集を参照してください。 –

+0

Reduxがどのように動作するかはまだ分かりません。アプリ状態にReduxストア以外のソースを使用しないでください。実際の状態を保存するのではなく、シリアル化にローカルストレージしか使用できません。要求URIがユーザーに依存する場合は、現在のユーザーデータに基づいて要求URIを作成します。私はここに何の問題も見ません。 – hindmost

答えて

1

localstorageの呼び出しは同期式なので、localstorageに値を設定すると、将来のコード行が実行される前に完了していると見なすことができます。

関連する問題