2つのRedux州/レデューサーの間に「モデル」を共有することはできますか？

Question

たとえば、2つの部分を持つアプリがあるとします。 1つは情報を表示するメインエリアで、もう1つは選択肢から選択できるポップアップモーダルです。

[] [] [] [] [] 
[] [] [] [] [] 

と

-------------- 
| [] [] [] [] | 
| [] [] [] [] | 
| [] [] [] [] | 
| [] [] [] [] | 
| [] [] [] [] | 
--------------- 

トップあなたはボックスを選択した場合、モーダル（下）がポップアップし、あなたがメイン画面に配置する項目を選択することができますメイン画面です。

2つの領域は同じデータを共有します。これは「ヒーロー」のリストから選択できます。

"Main"や "Modal"のような2つの "州"は "英雄"と同じ "データベース"を持つことができますか？

const Main = { 
    ... 
    heroes: heroes 
} 

const Modal = { 
    ... 
    heroes: heroes 
} 

同様

そして、彼らの両方が同じ "英雄" モデルを使うのか？

またはこれをうまく設計するにはどうすればよいですか？

Answer 1

ヒーローリストは1つのレデューサー（メイン）にしか存在しないと思います。おそらく、選択されたヒーローがモデル減速機に存在するでしょう。あなたは1つのコンポーネントで複数の減速器から状態を注入することができます。

export default connect(
(state) => ({ 
    heroesList: state.main.heroesList, 
    selected: state.model.selectedHero 
}), 
(dispatch) => ({ 

}) 
)(Model) 

Answer 2

私は状態を全く分割しません。私はあなたにヒーローのコリジョンを持ち、選択時にisSelectedプロパティを切り替えることをお勧めします。コンポーネントの小道具は、そのような状態から簡単に計算可能でなければなりません。選択されたヒーローがあれば、モーダルを表示します。同期状態を維持することはreduxの意図ではなく、あなたのビューのそれぞれが所与の状態から必要な小道具を計算することができる。また、mapStateToPropsは、その一部ではなく全体のアプリケーション状態を引数として受け取ることにも注意してください。これがあなたを助けることを願っています