React Fluxアプリでデータを（店舗やコンポーネントで）複製しないでください。

Question

Fluxをベースにしたプロジェクトを開始していますが、気になることに気付きました。

私はゲームのリストを持っているとしましょう、私はGames店とその店を聞くコンポーネント - HomepageGamesを持っています。

アプリが読み込まれると、サーバーからゲームがプルされ、ストアに保存されます。その後、Reactコンポーネントによってゲームの状態が反映されます。だから私は2つの場所でゲームを持っていきます。

しかし、ゲームは数多くあります。

また、私は引っ張っているURLのリストを持っており、ヘッダーとフッターの2つのナビゲーションを構築しています。だから私はURLを3つの場所に持っています - Navigationストアと2つのナビゲーションリアクションコンポーネント。

とリンクも数百...だから

することができ、どのように私は、このメモリは、膨満感を避けますか...？ ...または私は調整する必要がありますか？

Answer 1

ストアからリストを取得している場合は、実際にストアからゲームのリストを複製しているわけではありません。 Javascriptでは、デフォルトでコンポーネント内のこのリストの参照が取得されます。あなたはHomepageGamesでこれを行うかどう

ので、：

componentDidMount: function() { 
    this.setState({ 
     games: GameStore.getAllGames() 
    }); 
} 

あなたはまだメモリ内のゲームの唯一のリストを持っています。

お客様のコンポーネントには、GamesStoreのリストの参照があります。あなたのコンポーネントのこのリストにいくつかのゲームを追加しようとすると、ストアも変更されているリストが表示されます。

ほとんどの場合、これは望ましくない動作です。この参照を避けるために、多くの人がImmutableのようなライブラリを使用しています。しかし、あなたにとっては、これはいい考えです。