React/Redux 在组件构造函数中加载应用程序状态
React/Redux Loading application state in component constructor
我正在渲染高阶组件,比如说 Application
,我需要在渲染之前从服务器获取一些数据。我所做的是,在 Application
的构造函数中,我发出 loadApplicationState()
操作,执行服务器调用并准备初始状态。
一些简化的代码,
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
中 运行 这个,然后在我们的 Redux 状态中测试 $isLoading
标志,呈现加载指示器或实际 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)
我正在渲染高阶组件,比如说 Application
,我需要在渲染之前从服务器获取一些数据。我所做的是,在 Application
的构造函数中,我发出 loadApplicationState()
操作,执行服务器调用并准备初始状态。
一些简化的代码,
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
中 运行 这个,然后在我们的 Redux 状态中测试 $isLoading
标志,呈现加载指示器或实际 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)