Zeige Fortschrittsbalken BEFORE Gehe zu Route

Question

Ich entwickle eine universelle Reaktion Anwendung mit Redux. Ich benutze react-router v3. Ich möchte einen Fortschrittsbalken anzeigen "VOR" zur nächsten Route (nächste Route holt Daten von der API).

zum Beispiel vorstellen, ich bin in "Home Page" und ich möchte auf "Submit Page" gehen. Wenn ich auf den Submit Link (react-router Link) klicke, zeige zuerst einen Fortschrittsbalken in "Home Page" und warte auf Daten einlesen abholen und dann gehe zu "Submit Page". Meine Reaktion Routen:

<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> 

in Homepage:

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

Meine Seite Container Code Senden ist:

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

"fetchSubmitInitialData" ist ein Action-Schöpfer, die Daten holen aus API.

Answer 1

Eine Lösung wäre, eine placeholder Komponente als Requisiten an Ihre SubmitPage übergeben, die nur beim Abrufen von Daten rendern wird.

So können Sie so etwas wie verwenden:

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={/*..*/}> 
    } 
} 

Und schließlich passieren Sie die Komponente HomePage als Platzhalter wie diese verwenden:

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

Hier verwende ich die Render Requisiten mit Router v4 Reagieren . Aber ich bin sicher, es ist ein Äquivalent für die Version 3

Jetzt HomePage wird das Abrufen während Daten übertragen und die Requisiten loading und progress verwenden können, um zu zeigen, ein Spinner oder etwas

Answer 2

können Sie onEnter Haken Fügen Sie in Ihrem Router und fügen Sie onEnter.js in Ihrem SubmitContainer Ordner hinzu und verschieben Sie fetchSubmitInitialData auf die onEnter.js dann importieren Sie Ihren Shop hier und versenden Sie ihn. die Umsetzung könnte wie folgt aussieht:

Ihre React-Strecke

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> 

erstellen onEnter.js Datei in SubmitPage Container:

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

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

    store.dispatch(fetchSubmitInitialData()) 
} 

dann können wir Zustand für Fortschrittsbalken in redux integrieren.

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 
} 
} 

so gibt es keine Notwendigkeit, die Daten innerhalb SubmitPage Behälter zu holen.

Eine Lösung wäre, eine Platzhalterkomponente als Props an Ihre SubmitPage zu übergeben, die nur beim Abrufen von Daten gerendert wird.

So können Sie so etwas wie verwenden:

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)