正しい方法

Question

私は第2のAPI呼び出しで使用される特定のIDを取得するために、1つのAPI呼び出しを行うために私を必要とする特定の機能を持って、ロジック賢明それは次のようになります。

componentWillMount() { 
    this.props.functionOne() 

    // Wait for functionOne to complete before calling this 
    this.props.functionTwo(this.props.paramFromFunctionOne) 
} 

を

ここで、this.props.paramFromFunctionOneは、機能が完了するとレフィックス状態で保存されるものです。

Answer 1

：

componentWillMount() { 
    // As `axios` returns promise, you should return it from `functionOne` 
    // This way you can be able to use `.then` method. 
    this.props.functionOne() 
    .then(() => { 
     // This code block would be executed after api call from first function will be finished. 
     this.props.functionTwo(this.props.paramFromFunctionOne) 
    }); 
} 

Answer 2

redux-sagaを使用してください。 Redux sagaは、非同期関数の呼び出しと副作用の処理に特に使用されます。

たとえば、データが取得されている間に、UIにローダーアイコンを表示することができます。その後、データを受け取った後にローダーアイコンを非表示にします。 Redux-sagaを使用して、この非同期アクティビティを同期アクティビティに変換して書き込むことができます。

例は、あなたが最初で、この気が遠くなるのかもしれません

import { take, call, put, fork, cancel, race } from 'redux-saga/effects'; 
import { delay } from 'redux-saga'; 
import { LOCATION_CHANGE } from 'react-router-redux'; 
import { DATA_LOAD_REQUEST } from './constants'; 
import { dataLoadSuccess, dataLoadFailure } from './actions'; 

import request from 'utils/request'; //isomorphic-fetch 

export function* getCompanies() { 
    const requestURL = 'https://api.myjson.com/bins/32rap'; 
    const { companies, timeout } = yield race({ 
    companies: call(request, requestURL), 
    timeout: call(delay, 10000), 
    }); 

    if (companies) { 
    yield put(dataLoadSuccess(companies.data)); 
    } else if (timeout) { 
    yield put(dataLoadFailure()); 
    } else { 
    yield put(dataLoadFailure()); 
    } 
} 

export function* getCompaniesWatcher() { 
    while (yield take(DATA_LOAD_REQUEST)) { 
    yield call(getCompanies); 
    } 
} 

export function* companiesData() { 
    const watcher = yield fork(getCompaniesWatcher); 

    yield take(LOCATION_CHANGE); 
    yield cancel(watcher); 
} 

// All sagas to be loaded 
export default [ 
    companiesData, 
]; 

をsaga-。ビットごとに説明しましょう。 redux-sagaの定型文を無視すると、このコードが完全に同期していることがわかります。

はReduxのストアに

1. ディスパッチdataLoadRequest()コード - 所与の解読します。 （UIのローダーを表示するため）。

2. APIにデータをリクエストします。

3. ハンドルのタイムアウトに（データは、10秒でロードReduxのストアにdataLoadFailure()アクションをディスパッチする。
4. データを受信した場合、ストアにdataLoadSuccess()アクションをディスパッチしない場合。

Reduxの-佐賀ES6を使用します発電機の機能。yieldキーワードは、発電機の機能の一部である。function*が、それは発電機能と正常でないjavascriptの関数であることを示している。

・ホープ、このことができます。頑張って！

あなたはこのようにそれを達成することができ、私が正しく理解し