react-reduxアプリケーションでのキーの役割と動的コンポーネントの状態の管理

Question

私は基本的にどのキーが対象であるかを理解しています。子リストの変更を識別できる必要があります。

私が問題を抱えているのは、情報の流れと、店舗の状態とサブコンポーネントの状態の同期性を維持することです。

たとえば、<CustomTextInput>のリストがあり、それはまさにそのようなものです。内部にテキスト入力があるコンテナ。それらの多くは<CustomTextInputList>要素に格納されています。

リスト内のCustomTextInputの数は変更できますが、加算したり減算したりすることができます。 CustomTextInputが挿入されるたびに新しいキーを発行するインクリメントカウンタ付きのファクトリがあります。

私の店にはCustomTextInputModelタイプがあります。私が入力の中の値を変更するときはいつでも、私の店でアクションをディスパッチするコールバックを呼び出す必要があります。しかし、どのように修正するのかを知るにはどうすればよいのですか？店舗全体の状態が再現されているので、リスト全体が単一のインスタンスを変更することを再確認しないようにするにはどうすればいいですか？ CustomTextInputにモデルIDの参照を保存する必要がありますか？これが鍵でしょうか？私は:)これで

Answer 1

非常に新しいですしかし、その後どのように私は修正するかを知っていますし、どのように私は、リスト全体が変化するのを再レンダリングしないことを確認することができます

Manythanks、ストア全体の状態が再作成されているため、1つのインスタンス？あなたのコンポーネントがReduxのストア内のオブジェクトのリストに結び付けられている場合は親が新しい小道具を得ることになるので、

、それはリスト全体を再レンダリングします。しかし、再レンダリングを回避するにはいくつかの方法があります。

これは非常に高度な投稿ですが、うまくいけば助けてください。私はが、それぞれの商品をレヴィクスストアに接続して、支柱を介して渡されるIDを介してそれ自体を聞くことによって、大きなリストをレンダリングする際に反応還元アプリケーションをより効果的にする方法の1つを説明するのに有用であることがわかります。

編集点を示すHERESに別の良い記事：減速機の内部https://medium.com/devtravel/optimizing-react-redux-store-for-high-performance-updates-3ae6f7f1e4c1#.3ltrwmn3z

：アイテム・コンポーネントの内部

<div> 
    { 
    ids.map(id => { 
     return <Item key={id} id={id} />; 
    }) 
    } 
</div> 

// Returns an array of just ids, not whole objects 
function mapStateToProps(state) { 
    return {id: state.ids}; 
} 

：リストコンテナで

function items(state = {}, action) { 
    switch (action.type) { 
    case 'MARK': 
     const item = state[action.id]; 
     return { 
     ...state, 
     [action.id]: {...item, marked: !item.marked} 
     }; 
    default: return state; 
    } 
} 

function ids(state = [], action) { 
    return state; 
} 

：

すべてのCustomTextInputにモデルIDの参照を保存する必要がありますか？

はい、特定のアイテムに修正を加えたい場合は、還元アクションにいくつかのタイプのキー/ IDが必要です。

これが鍵でしょうか？

reduxストアの中で何かを参照する最も一般的な方法はidです。