reactjs - コンポーネントを非同期データで初期化する

Question

react + redux + thunk の選択ボックスのデータをロードする方法と場所(つまり、アクションでディスパッチを呼び出す) を見つけようとしています。App コンテナーのコンストラクターに入れる必要があるのか​​、コンポーネント内にロードする必要があるのか​​ わかりません (私の例では「MyDropdown」)

私のメインアプリ：

import MyDropdown from '../components/mydropdown';
// Should i import my action here and then...
// import { loadData } from '../actions';

class App extends Component {
  render() {
    return (
      <div className="page-content">
        <div className="option-bar">
          // SEND it as a PROP inside MyDropdown... 
          <MyDropdown />
        </div>
      </div>
    );
  }
}
export default App;

私のコンポーネント

// OR.. Should i load it in my MyDropdown component here?
import { loadData } from '../actions';

class MyDropdown extends Component {
  // If i load it here on load, how do i do it?
  render() {
    return(
      <select>
         {renderOptions()}
      </select>
    );
  }
}

App クラス内で componentDidMount() を試しましたが、うまくいかないようです。子コンポーネント内でアクションを呼び出すのではなく、初期化データとアクションの呼び出しをすべて一元化するため、そこに配置することは理にかなっているようです。また、起動時に複数の選択ボックスをロードする必要があるため、App クラスがかなり大きくなる可能性がありますが、それは正しい方法ですか? 反応を学び始めたばかりなので、ベストプラクティスが何であるかわかりません。