進捗バーを表示する前に経路

Question

私はreduxを使って汎用反応アプリケーションを開発しています。私は反応ルータv3を使用します。 私は次のルートに進むために "BEFORE"進行状況バーを表示したい（次のルートはAPIからデータを取得しています）。

たとえば、私は「ホームページ」に入っていて、「ページを送信」に行きたいと考えています。 Submit Link（react-router Link）をクリックすると、最初に進行状況バーが表示されます。が "ホームページ"に表示されます。送信ページデータの送信ととは、 "Submit Page"に移動します。 私はルートに反応：ホームページ内

<Route component={App}> 
     <Route path={HomingRoutes.HomePage} component={HomePage}/> 
     <Route path={HomingRoutes.SubmitPage} component={SubmitPage}/> 
     <Route path={HomingRoutes.SearchPage} component={SearchPage}/> 
     <Route path={`${HomingRoutes.DealsPage}`} component={DealsPage}/> 
     <Route path={`${HomingRoutes.DealPage}/:id(/:title)`} component={DealPage}/> 
     <Route path={`${HomingRoutes.Detail}/:id(/:title)`} component={DetailPage}/> 
     <Route path="*" component={NoMatch}/> 
    </Route> 

：

<Link to "/Submit" >Submit</Link> 

は、ページのコンテナコードを提出マイは次のとおりです。

class SubmitContainer extends React.Component { 
    static readyOnActions(dispatch) { 
     return Promise.all([ 
      dispatch(SubmitActions.fetchSubmitInitialData()), 
     ]); 
    } 
    componentDidMount() { 
     this.props.fetchSubmitInitialData(); 
    } 
} 

"fetchSubmitInitialDataは" からデータをフェッチするアクションの作成者でありますAPI。

Answer 1

1つの解決策は、placeholderコンポーネントを小道具としてSubmitPageに渡し、データが取得されるときにのみレンダリングされることです。

だからあなたのようなものを使用することができます

class SubmitContainer extends React.Component { 
    state = { 
    loading: true 
    progress: 0, 

    } 

    componentDidMount() { 
    // fetch some data and update the state 
    // consider updating the progress more often 
    this.props.fetchSubmitInitialData() 
     .then(() => { 
     this.setState({ loading: false, progress: 100 }) 
     }) 
    } 

    render() { 
    const Placeholder = this.props.placeholder 
    // Show the placeholder when loading 
    if (this.state.loading) { 
     return <Placeholder loading progress={this.state.progress} /> 
    } 

    // Otherwise render your component with the data 
    return <SubmitPage data={/*..*/}> 
    } 
} 

をそして最後に、あなたがこのようなプレースホルダとしてコンポーネントHomePageを使用することができ渡す：

<Route path={HomingRoutes.HomePage} component={HomePage}/> 
<Route path={HomingRoutes.SubmitPage} render={(props) => (
     <SubmitContainer {...props} placeholder={HomePage} /> 
    )}/> 

ここで私は、レンダリングの小道具を使用するルータのV4に反応。しかし、私は、バージョンのための同等の3

今HomePageはデータフェッチ中にレンダリングされますと、あなたはあなたにonEnterフックを追加することができますスピナーか何か

Answer 2

を表示するために小道具loadingとprogressを使用することができますがあります確信していますあなたのSubmitContainerフォルダ内にonEnter.jsを追加し、fetchSubmitInitialDataをonEnter.jsに移動して、ここにストアをインポートして発送してください。 SubmitPageコンテナにonEnter.jsファイル作成

あなたのリアクト・ルート

import { onEnterSubmitPage } from './your onEnter path/onEnter' 

<Route component={App}> 
    <Route path={HomingRoutes.HomePage} component={HomePage}/> 
    <Route path={HomingRoutes.SubmitPage} component={SubmitPage} onEnter={onEnterSubmitPage}/> 
    <Route path={HomingRoutes.SearchPage} component={SearchPage}/> 
    <Route path={`${HomingRoutes.DealsPage}`} component={DealsPage}/> 
    <Route path={`${HomingRoutes.DealPage}/:id(/:title)`} component={DealPage}/> 
    <Route path={`${HomingRoutes.Detail}/:id(/:title)`} component={DetailPage}/> 
    <Route path="*" component={NoMatch}/> 
</Route> 

：実装は、このようになります可能性があります

/** 
* Import dependencies and action creators 
*/ 
import { store } from '../../index' 
import { fetchSubmitInitialData } from './actions' 

/** 
* Define onEnter function 
*/ 
export function onEnterSubmitPage() { 

    store.dispatch(fetchSubmitInitialData()) 
} 

をし、我々はあまりにもReduxのにプログレスバーの状態を統合することができます。

actions.js

/** Import all dependencies here **/ 
import axios from 'axios' 
import { FETCH_SUBMIT_INITIAL_DATA, IS_FETCHING_INITIAL_DATA } from './constants' 

export function fetchSubmitInitialData() { 
/** this dispatch is from middleware **/ 
return (dispatch) => { 
    /** this will set progress bar to true **/ 
    dispatch(fetchSubmitInitialData(true)) 

    /** Your fetching action here, this will depend on your configuration **/ 
     axios.get(`url`, {{ headers: `bearer //your token`}}) 
     .then((response) => { 
      dispatch(fetchSubmitInitialData(false)) 
     }) 
    } 
} 

export function isFetchInitialData(status) { 
return { 
    type: IS_FETCHING_INITIAL_DATA, 
    status 
} 
} 

のでSubmitPageコンテナ内のデータをフェッチする必要はありません。

解決策の1つは、データが取得されているときにのみレンダリングする送信ページにプレースホルダコンポーネントを渡すことです。

あなたのようなものを使用することができますので：

class SubmitContainer extends React.Component { 

    render() { 
    /** this come from your reducer **/ 
    const { isFetching, submitInitialData } = this.props 
    // Show the placeholder when loading 
    if (isFetching) { 
    return <Loader /> 
    } 

    // Otherwise render your component 
    return <SubmitPage data={/*..*/}> 
} 
} 

// Map state to props 
const mapStatetoProps = ({ app }) => { 
    isFetching: //, 
    submitInitialData: // 
} 

export default connect(mapStatetoProps, null)(SubmitContainer)