2016-12-30 8 views
1

私はreactjs/reduxの世界で初めてのアプリケーションです。左側に名前のリストがあり、右側に選択した名前の詳細が表示されるページレイアウトのWebアプリケーションを作成しています。reactjs/reduxアプリケーションのリストで選択した項目をどのように維持しますか?

reduxを使用すると、リストから名前を選択すると、アプリケーションはajax呼び出しを送出して詳細を取得します。これにより最終的に選択された詳細でredux状態が更新され、詳細コンポーネントが情報で更新されます。

名前のリストはag-gridを使用して作成されるので、選択した項目を強調表示することができます。しかし、redux状態が更新されると、すべてのコンポーネントが再レンダリングされ、リスト内の選択された項目は選択されなくなります。一般的には、名前のリストの状態は、ページが読み込まれたとき(つまり、リストがフィルタリングされた場合、フィルタされなくなったとき)の初期状態に戻ります。

アイテムを選択する前に、選択したアイテム(および実際にはそのリスト上で実行されているすべてのアイテム)を維持するにはどうすればよいですか?私はほとんど私の還元状態でグリッドの状態を維持する必要があると思っています...でもそうですか?それは私が持っている唯一の選択肢ですか?

私のコンポーネントの構造は、NameTableとNameDetailsの2つの子を持つコンテナコンポーネント(WSContainer)です。

答えて

0

私はあなたがReduxの状態int型selectedIdを保存し、アクションを派遣することを示唆しています。私はまた、あなたがリターンにAJAX呼び出しを待つ必要はありませんので、これはそれを作るだろう

値としてキーや詳細などのIDでバックオブジェクトで取得した各ディテールを格納
detailsById: { 
    id1: detail1, 
    id2: detail2 
}, 
selectedId: id1 

を示唆しています詳細を表示する前にその時点で、選択したIDで保存したIDと一致する詳細データが表示されます。

還元行為の詳細については、thisをご覧ください。

0

選択したアイテムの値、インデックス、またはテキストを状態内に保存しないのはなぜですか?次に、ページがレンダリングされるときに、componentDidMountメソッドまたはcomponentWillMountメソッドを使用して、選択した名前(または何か他のもの)を強調表示できます。

https://facebook.github.io/react/docs/react-component.html

関連する問題