react,reduxを用いてアプリを開発しています。
ページが描画されるタイミングで、サーバーからデータを取得してそれを表示するものを作っているのですが、表示されるまで1テンポ遅れてしまいます。
具体的には、
- 親コンポーネントA
- 子コンポーネントB
があります。
親コンポーネントのイメージです。
componentWillMount()内でサーバーからデータを取得し、
取得したものをReduxのリストにセットします。
render()の中では子コンポーネントを複数描画します。
javascript
1class Parent extends React.Component { 2 3 componentWillMount(){ 4 // 1.サーバーからデータを取得 5 // 2.reduxで作成したリストに値を代入する 6 } 7 8 render() { 9 const answList = [] 10 for(var i=0; i<10; i++){ 11 answList.push(<Child {...this.props} ansIndex={i}/>) 12 } 13 14 return ( 15 <Page> 16 {ansrList.reverse()} 17 </Page> 18 ) 19 } 20}
子コンポーネントのイメージです。
親でセットされたReduxのリストから適当な値を選んで表示します。
javascript
1class Child extends React.Component{ 2 render() { 3 let reduxList = this.props.reduxList 4 return ( 5 <AnsListContents> 6 {reduxList.hoge} 7 </AnsListContents> 8 ) 9 } 10}
この様に実装すると、
- Aが表示されるためのページ遷移ボタンをクリックする
- Aが表示される
- Bの中にReduxのリストは表示されていない
- 一度前のページに戻る
- 再びAが表示されるためのページ遷移ボタンをクリックする
- Aが表示される
- Bの中にReduxのリストが表示されている
というふうに1テンポ遅れてしまいます。
reactのライフサイクルとReduxのライフサイクルの関係の問題だと思うのですが、
これってReduxを用いたままイメージ通りの実装することは可能でしょうか。
また、他の部分ではReduxを使い、
このように1テンポ遅れるところはreduxを使わずにstateで実装することも考えているのですが、
1アプリノ中にreduxとstateが混在しているのは設計としてはあまりよくないのでしょうか。
どなたかご存じの方がいらっしゃれば教えて頂けるとうれしいです。
よろしくお願いします
あなたの回答
tips
プレビュー