Reduxを用いると描画が1テンポ遅れてしまう

Question

react,reduxを用いてアプリを開発しています。

ページが描画されるタイミングで、サーバーからデータを取得してそれを表示するものを作っているのですが、表示されるまで１テンポ遅れてしまいます。

具体的には、

• 親コンポーネントA
• 子コンポーネントB

があります。

親コンポーネントのイメージです。
componentWillMount()内でサーバーからデータを取得し、
取得したものをReduxのリストにセットします。

render()の中では子コンポーネントを複数描画します。

class Parent extends React.Component {

	componentWillMount(){
    // 1.サーバーからデータを取得
    // 2.reduxで作成したリストに値を代入する
	}

	render() {
		const answList = []
		for(var i=0; i<10; i++){
			answList.push(<Child {...this.props} ansIndex={i}/>)
		}

		return (
			<Page>
				{ansrList.reverse()}
			</Page>
		)
	}
}

子コンポーネントのイメージです。
親でセットされたReduxのリストから適当な値を選んで表示します。

class Child extends React.Component{
	render() {
		let reduxList = this.props.reduxList
		return (
			<AnsListContents>
				{reduxList.hoge}
			</AnsListContents>
		)
	}
}

この様に実装すると、

1. Aが表示されるためのページ遷移ボタンをクリックする
2. Aが表示される
3. Bの中にReduxのリストは表示されていない
4. 一度前のページに戻る
5. 再びAが表示されるためのページ遷移ボタンをクリックする
6. Aが表示される
7. Bの中にReduxのリストが表示されている

というふうに１テンポ遅れてしまいます。

reactのライフサイクルとReduxのライフサイクルの関係の問題だと思うのですが、
これってReduxを用いたままイメージ通りの実装することは可能でしょうか。

また、他の部分ではReduxを使い、
このように1テンポ遅れるところはreduxを使わずにstateで実装することも考えているのですが、
1アプリノ中にreduxとstateが混在しているのは設計としてはあまりよくないのでしょうか。

どなたかご存じの方がいらっしゃれば教えて頂けるとうれしいです。
よろしくお願いします

Comments

[HayatoKamono]

現象を再現出来る最低限のサンプルコードを用意して掲載頂くことは可能ですか？