現在のユーザーの流行語アプリのデータ構造ですか？

Question

私はReact and Meteorを使用しています。

トップレベルには、MainWrapperコンポーネントが1つあります。ユーザーデータが到着していない場合はロードを示し、ユーザーがいなければログイン/登録し、すべてのユーザーデータがある場合は実ページを表示します。

これはMeteor.user（）を使用しているコンポーネントがデータが到着したときに再レンダリングする前に、小さな瞬間に未定義になるのを防ぐためです。

だから、本当の問題へ上：

これはMainWrapperの一番下にあります。

export default createContainer(() => { 
    return { 
     user: Meteor.user(), 
    }; 
}, MainWrapper); 

各ユーザーアカウントの文書は、だから私はアプリの周りに非常に多く、このデータを必要とする、友人、通知などの最初の名前のプロファイルプロパティを持っています。

MainWrapperからプロップとしてユーザーを渡すのが最善でしょうか？

または、必要なすべてのコンポーネントでそのデータを購読する必要がありますか？ （または購読する必要がありますか？）MainWrapperがユーザーが利用可能であることを確認したら、コンポーネントが一度だけロードされた場合、余分なオーバーヘッドなしでMeteor.user（）をコンポーネントで使用できますか？

！

Answer 1

良い質問！

一般に、のアプリケーション状態の管理方法はです。状態管理ライブラリ（Flux、Reduxなど）があります。彼らはあなたの状態を処理し、あなたのコンポーネントは州の変更を購読しています。

---

私はMainWrapperから小道具としてダウンユーザーを渡すことが最善ですか？

そうすることで、すべての子コンポーネントに小道具を渡す必要があります。 A→B→C→Dのコンポーネントがあるとします。

ユーザーオブジェクトをAからDに渡す場合は、BとCも渡すことを確認する必要があります。それはあなたが容易にそれをいくぶん長い間渡すことを忘れることができるので、友好的です。しかし、大きな問題は、すべてのコンポーネントをユーザーオブジェクトに依存させることです。 Bコンポーネントを別の場所で再利用したいと考えていますが、それはユーザオブジェクトに依存していますか？

---

どのようにして状態を正しく管理できますか？その結果、コンポーネントは再利用可能ですか？

たとえばReduxを使ってみましょう（私はこれまでの経験があります）。コンポーネントをプレゼンテーションとコンテナに分けることができます。要するに、PresentationalコンポーネントはStore（あなたの州）に加入しておらず、どこにでも再利用することができます。一方、コンテナコンポーネントはStoreにサブミットされ、インクルードされた子PresentationコンポーネントにPropsを渡します。

1. By the author of Redux
2. Good comparision：ここ

   は、いくつかの良いが、表現的&コンテナコンポーネントについて読みます。だから、コンポーネントの分離の考え方があまりにも流星に実装することができる

---

結論

。たとえば、MeteorアプリケーションはAPIとして動作し、Reduxはフロントエンドアプリケーションのロジックと状態を処理します。さまざまな実装があります。 good readはどのようにReduxをMeteorに統合できますか？

Redeux（または他の状態ライブラリ）をスキップし、Meteorツールセットを使用してコンポーネント分離を実装することができます。

私の答えは、React &です。Reduxは経験豊富であり、どのようにコンポーネントを整理するのが一般的なのかを知ることができます。

Answer 2

私は、これはデータベースを照会するからであるが、あなたは、これは問題ではないのレンダリングサーバ側をやっている場合を除き確かに1つのサーバー上にあります（but let's double check）クライアント上Meteor.user()を呼び出すオーバーヘッドがないと思います。ユーザーがロードされた後Meteor.user()が定義されているに応じて、あなたのコンポーネントのみがレンダリングされている場合、必要なときに

• だから、あなただけMeteor.user()を照会することができます。

• 他の方法は、React contextを使用してこの情報を渡すことです。ドキュメントにはいくつかの警告が記載されており、実験的な機能だと言われています。私はしばらくそれを使用していて、私はそれに非常に満足しています。親の小道具を子どもに渡す必要があるコンポーネントのリストがあるときに、@ Jordanが言及した問題を解決するために作られています。

：これは次のようになります。それがうまくデータ依存からUIを分離し、インスタンスの流星コンテキストのテストするために、あなたのコンポーネントが容易になりますので、

export class MainWrapper extends Component { 
    // specify some properties to make available to all descendant 
    getChildContext() { 
    return { 
     currentUser: Meteor.user(), 
    }; 
    } 
} 
MainWrapper.childContextTypes = { currentUser: PropTypes.object }; 


class SomeComponent extends Component { 
    render() { 
    const user = this.context.currentUser; 
    ... 
    } 
}; 

は、私が実際に第二のアプローチを好みます。この時点であなたが還元を必要としているかどうかは、あなた次第です。

より一般的には、UIオブジェクトのロール/データ状態のロールで反応オブジェクトを区切るコンテナ/コンポーネント構造を調べるとよいでしょう。それを行う場合は、コンテナ部分にMeteor.user()をフェッチする必要があります。私はそれをお勧めします。 React Komposerは簡単に行うことができ、データがロードされている間に表示されるプレースホルダーコンポーネントを指定することができます：1、2。また、Reactコンテキストを具体的に扱うが、メインリポジトリとは最新ではないmy forkに興味があるかもしれません。