反应-在Ajaxing时显示加载屏幕

Question

与其他一些问题不同，我的组件已经完全加载。 在组件加载之前，我已经设法创建了加载屏幕，但是现在我不确定如何在此之后创建它。

我现在想做的是进行ajax调用，然后更改状态/（redux存储），然后应显示我的加载屏幕。

例如，一个子组件调用一个ajax：

let url = "src/php/search.php";
axios.get(url, {
params: {
  report_id: data.id,
  type: "get_report"
}
})
.then( r =>
  {
    console.log(r.data);
    this.props.dispatch( { type: "set_loading", payload: false } );
    this.props.dispatch({ type: "set_report", payload: r.data });
    this.props.router.push('/form/start');
  }
);

这是父渲染：

render()
{
  return (
    <div style={{padding: "0 5px"}}>
      <LoadingScreen loading={this.props.loading} /> <<<<< The loading screen
      <div style={{padding: "0"}}>
        <Link activeClassName="active" className="default bottom-radius" to='main'>Main Menu</Link>
        <Link activeClassName="active" className="default bottom-radius" to='search'>Search</Link>
        <a className="bottom-radius" style={{ float: "right", color : "blue", backgroundColor: "red", padding: "5px", cursor : "pointer" }} onClick={this.logout}>Logout</a>
      </div>
      <div style={{paddingTop: "10px"}}>
        {this.props.children}
      </div>

    </div>
  );
}

const App = connect(
(store) =>
{
    return {
      "user_id": store.component.user_id,
      loading: store.component.loading
    };
}) (AppComponent);

我期望this.props.loading变为true，然后显示加载屏幕， then在子组件中的该屏幕上消失。 但是相反，什么也没有发生。 我是否需要一个中间件呢？

Answer 1

you send an ajax request时，您需要dispatch an action以将状态设置为loading。 取而代之的是，您在ajax的success call中调度一个动作，此后不久，您发送set_report动作，该动作将覆盖set_loading动作，甚至在您未注意到之前。

使用像这样的ajax调用

axios.get(url, {
params: {
  report_id: data.id,
  type: "get_report"
}
})
.then( r =>
  {
    console.log(r.data);
    this.props.dispatch({ type: "set_report", payload: r.data });
    this.props.router.push('/form/start');
  }
);

并在发送ajax调用的地方调用此dipatch

    this.props.dispatch( { type: "set_loading", payload: false } );