フェッチデータに反応-ルータ

Question

をして、ルートを変更する前に私が使用しているは反応し、、およびReduxのバックエンドでlaravelと、私はすべての最新のリリースを使用していますし、私は、ルータを反応させます私は自分の開発経験を次のレベルに引き上げて、自分が好きだった方法に基づいてこれを使うことに決めました。A LOT。私はについて、私たちルートにいるとき、私はその後、ホームをクリックしますが、ルータはホームページをレンダリングする前に、それは、サーバーへの非同期呼び出しを行う必要があります。

は、私は次のような問題があります。理論的には、次のルートに進む前に完了する必要があるため、これを非同期にする必要があることがわかります。

次に、サーバーの依存関係を取得していることを示すバーがページ上部に表示されます。完了したら、ホームルートに進む必要があります。 GitHubに、あなたはコードタブ上にある例では、その後、あなたが問題]タブをクリックし、青色のロードバーは、データや依存関係があることを示しているページの最上部に

実用的な例を表示されますされますフェッチされると、それが完了すると次のルートをレンダリングします。これはどうすればいいですか？

私はミドルウェアのようなものを使うべきだと思っています。ルート変更の前に、必要な依存関係をフェッチするアクションをディスパッチする必要があります。いったん完了すると、いくつかの部分を更新するアクションをディスパッチする必要があります。私は、ミドルウェアを反応ルータにアピールする方法を見つけることができません。そして、どこからどのように起動するのか本当に分かりません。

Answer 1

あなたは、プレーンReduxのルータを使用している場合は、（ビューに入る前に呼んでいる）フォーカス取得時またはonLeaveのようなルータのライフサイクル機能を使用することができます...、あなたは何でも行うことができますこれらはコールバック関数を受け入れますが、実際のルーティングは発生します。

別のオプションを使用しているいくつかは、このようなReduxの-約束-ミドルウェアとして非同期ジョブまたは単にのためのミドルウェアを約束Reduxのは、非同期アクションと完全な作品であるloadingbar（我々は生産にそれらを使用するよう）でサンク。ここ

Redux Promise Middleware

React Redux Loading Bar

Answer 2

これは、サーバーコールが行われたHomePageコンポーネントでよく処理されます。呼び出しが処理中であることを示す状態、たとえばthis.state.loadingまたはthis.state.processingを設定してから、これらの値に基づいてローダーまたはバーを表示/非表示にする必要があります。例えば

export default class Home extends React.Component { 
constructor(props) { 
    super(props) 
    this.state = {processing: false} 
} 
getData(){ //method that makes the server call 
    ...//make the call to the server 
    this.setState({processing: true}) 
    //check that the server call returns something and transition to next page when data is returned 
} 

render() { 
    return (
    <div> 
    {this.state.processing ? "return the loader image" : "else maybe return null"} 
    <div>content of the home page</div> 
    </div> 
) 
} 
} 

Answer 3

Reduxのなしの例である：

マイページ。JSX

import React from 'react' 
import { fetchDataForMyPage } from './someApi' 

let data = {} 

export default class MyPage extends React.Component { 
    constructor() { 
     super() 
     this.state = { 
      /* ... */ 
      data: data 
      /* ... */ 
     } 
    } 
    render() { 
     /* ... */ 
    } 
    static loadData(routerParams, callback) { 
     fetchDataForMyPage(routerParams).then((fetchedData) => { 
      data = fetchedData 
      callback() 
     }) 
    } 
    componentWillReceiveProps() { 
     this.setState({ 
      data: data 
     }) 
    } 
} 

Routes.jsxは

import React from 'react' 
import { Route } from 'react-router' 
import App from './components/App' 
import MyPage from './components/MyPage' 

const loadDataOnEnter = (nextState, replace, callback) => { 
    const nRoutes = nextState.routes.length 
    const component = nextState.routes[nRoutes-1].component 
    const params = nextState.params 
    component.loadData(params,() => callback()) 
} 

module.exports = 
    <Route path="/" component={App}> 
     <Route path="mypage/:param1" component={MyPage} onEnter={loadDataOnEnter} />, 
     <Route path="anotherpage" component={AnotherPage} onEnter={loadDataOnEnter} />, 
     <Route path="somepath" component={SomePageWithoutDataPreloading} /> 
    </Route>