個々の配列の要素を個別に接続する方法

Question

現在のアプローチは、ブックリスト全体をブックリストコンポーネントに接続することです。しかし、状態のいくつかのフィールドだけを変更することによって巨大なコンポーネントをレンダリングすることは効率的ではありません。 各書籍コンポーネントをどのようにマップするかは、個々のブック状態に接続する方法はわかりません。

プロジェクトはreduxを使用しています。ブックリストコンポーネントでこの

{ 
    "books": [ 
    { 
     "field1": "field1", 
     "field2": "field2", 
     "field3": "field3", 
    } ... 
    ] 
} 

のようなアプリケーションのグローバル状態は、我々は使用してそれでリストを接続今すぐブックにおける要件の変更、フィールドが頻繁に変更されることはありませんReduxの

反応します。問題は、あるフィールドが変更された場合、BookListComponent全体を更新するということです。それは私が期待している実行可能なコンポーネントではありません。

私は状態は書籍のインデックスを持っているdoesntのreselect

を使用するためにダウンし、個々のブックコンポーネントに接続ロジックをプッシュしたいと思い、私はそれが

export default connect(state => ({ 
    books[index]: state.books[index] 
}))(BookListComponent); 

を動作させるために接続書く方法を知りません

事前にお越しいただき、すべてのオプションをお待ちしております。

Answer 1

好きなコンポーネントを接続できます。トップレベルのコンポーネントにしか接続できないという厳しいルールはありません。

トップレベルコンポーネントを接続して小道具を通すとパフォーマンスが低下しますが、目立った有害な影響はありません。私の意見では、コードを介してデータをトレースできるというメリットは、常に価値があります。それについての議論がありますhere。

Answer 2

はフィールドのみ

機能を使用すると、リスト全体が再描画されることを意味するわけではない本を、更新するたびに呼び出され、レンダリング、それが本当だが

変更更新を反応します。

Reactでは、仮想DOMを使用していることに注意してください。実際に変更された要素だけを更新することができます。

あなたはそれらの記事を読んでいれば、あなたはそのすべてのあなたの知っている https://facebook.github.io/react/docs/state-and-lifecycle.html

を（もう少し詳細）この記事（それは短いだとcodeopen上のコード例を働いている）https://facebook.github.io/react/docs/rendering-elements.html と、この1を見てみましょうあなたのアプリを調べて、各変更時に実際に何がレンダリングされているかを確認する必要があります。

Answer 3

あなたの2番目の例は、です。ほぼです。 mapState関数は、1つではなく2つのパラメータを取るように宣言することができます。 2つのパラメータが宣言されている場合、Reduxはラッパーコンポーネントに与えられた小道具でそのmapState関数を呼び出します。だから、リスト項目のmapState関数は次のようになります。

const mapState = (state, ownProps) => { 
    const book = state.books[ownProps.index]; 
    return {book} 
} 

私のブログの記事Practical Redux, Part 6: Connected Lists, Forms, and Performanceはそれを行う方法のいくつかの例を示しており、また再来でアプリケーションのパフォーマンスのための重要な考慮事項について説明します。