Правильный способ вызова функции «шаг за шагом»

Question

У меня есть определенные функции, что требует от меня, чтобы сделать один апи вызов, чтобы получить определенный идентификатор, который используется во втором апи вызова, логика мудрого это будет выглядеть следующим образом:

componentWillMount() { 
    this.props.functionOne() 

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

, где this.props.paramFromFunctionOne - это что-то, хранящееся в состоянии redux после выполнения одной функции.

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 специально используется для вызова асинхронных функций и обработки побочных эффектов.

Например, вы можете указать значок загрузчика в пользовательском интерфейсе, в то время как данные извлекаются. И затем скройте значок загрузчика после получения данных. Вы можете написать преобразование этой асинхронной активности в синхронную с использованием 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, 
]; 

Вы можете найти эту ошеломляют, в первую очередь. Позвольте мне объяснить это пополам. Если вы проигнорируете шаблонную схему redux-saga, вы увидите, что этот код «выглядит» абсолютно синхронно!

расшифровки данного код-

1. Отправки dataLoadRequest() в Redux магазин. (Чтобы показать загрузчик в пользовательском интерфейсе).

2. Запросить данные для API.

3. ручки тайм-аут (если данные не загружается в течение 10 секунд, отправка dataLoadFailure() действие на перевождь магазина.
4. Если данные получены, отправка dataLoadSuccess() действие в магазин.

Перевождь-сага использует ES6 генератор функции. yield ключевого слово является часть функции генератора. function* означает, что она является функцией генератора, а не нормальная функция Javascript.

Надеется, что это помогает. Удаче!