React - ajaxing中に画面を表示する

Question

他の質問とは異なり、私のコンポーネントはすでに完全に読み込まれています。私はコンポーネントがロードされる前にローディング画面を作成することができましたが、後はどのように作成するのか分かりません。

私が今しようとしているのは、ロード中の画面を表示する状態/（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'); 
    } 
); 

：子コンポーネントは、AJAX呼び出しを

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を期待していたが、その後、その後、thenに消えるロード画面が表示されています子コンポーネント内にあります。しかし、代わりに何も起こりません。代わりにこのためにミドルウェアが必要ですか？

Answer 1

you send an ajax requestの場合は、ロードに状態を設定するには、dispatch an actionが必要です。代わりに、あなたが通知する前でさえset_loadingアクションを無効にするアクションをset_reportアクションを送信した直後に、Ajaxのsuccess callにアクションをディスパッチしています。

は

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呼び出しを使用して、あなたが条件付きでレンダリングする必要があるAJAX呼び出し

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