たとえばApplication、高次のコンポーネントをレンダリングしているので、レンダリングする前にサーバーからデータをフェッチする必要があります。私が行うことは、ApplicationI issue loadApplicationState()actionのコンストラクターで、サーバー呼び出しを実行し、初期状態を準備します。
いくつかの簡略化されたコード、
class Application extends Component {
constructor(props) {
super(props);
const { dispatch } = this.props;
dispatch(loadApplicationState());
}
render() {
const { stateLoaded } = this.props.state;
render (
<div>
{ stateLoaded ? renderApp() : renderProgress() }
</div>
)
}
}
function loadApplicationState() {
return (dispatch) => {
// fetch data and once ready,
applicationStateLoaded(data);
}
}
私は実際にそれを試しました、それはうまくいきます。しかし、これが正しいアプローチかどうかはわかりませんか？特にそのような目的のためにコンストラクターを使用します。
これをで実行してからcomponentDidMount、$isLoadingRedux状態のフラグをテストし、読み込みインジケーターまたは実際のUIをレンダリングします。そのようなもの：
import React, { Component } from 'react';
const mapStateToProps = (state) => ({
$isLoading: state.initialState.$isLoading
})
const mapDispatchToProps = (dispatch) => ({
loadApplicationState(){ dispatch(loadApplicationState()); }
})
export class Application extends Component {
componentDidMount(){
this.props.loadApplicationState();
}
render(){
const {
$isLoading
} = this.props;
{$isLoading ? (<Loader />) : <ActualApplication />}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Application)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加