在去路由之前顯示進度條

Question

我正在使用redux開發通用反應應用程序。我使用react-router v3。 我想要顯示進度條「BEFORE」前往下一個路線（下一條路線是從API中獲取數據）。

例如想象我在「主頁」，我想去「提交頁面」。當我點擊提交鏈接（react-router Link）時，首先在「主頁」上顯示進度條並等待提交頁面數據提取和然後轉到「提交頁面」。 我的陣營路線：

<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

一個解決辦法是通過一個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數據讀取期間將呈現，並且可以使用道具loading和progress顯示一個微調或東西

Answer 2

您可以添加onEnter鉤到您的路由器並在SubmitContainer文件夾中添加onEnter.js，並將fetchSubmitInitialData移動到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> 

創建onEnter.js文件中SubmitPage容器：

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

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

    store.dispatch(fetchSubmitInitialData()) 
} 

那麼我們可以對進度條狀態融入終極版了。

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容器內的數據。

一種解決方案是將佔位符組件作爲道具傳遞給您的SubmitPage，只有在數據獲取時纔會呈現。

所以，你可以使用類似：

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)