React Redux Thunk - Цепные рассылки - PullRequest
Новая
       40

React Redux Thunk - Цепные рассылки

0 голосов
/ 02 ноября 2018

В настоящее время я создаю приложение, которое сильно зависит от вызовов API. Вызовы API выполняются в действиях Redux с промежуточным ПО Thunk, например: 

export const brand_fetchAll = () => {
return dispatch => {
    fetch(apiURL+'brand')
        .then(response => {return response.json();})
        .then(content => {
            dispatch({
                type: 'BRAND_STORE_ALL',
                content
            })
        })
        .catch(error => console.log(error))
}}

В моем компоненте я сначала выбираю данные с помощью отдельных действий. После этого я открываю редактор: 

// A component method
editModeOn(){
    // Fetch data
    this.props.dispatch(campaign_fetchAll());
    this.props.dispatch(brand_fetchAll());
    // Open editor
    this.props.dispatch(page_editModeOn());
}

В данный момент редактор открывается до завершения вызовов API, поэтому данные не отображаются. Можно связать диспетчеризацию внутри действий, но я хочу сохранить модульность, поэтому мне не нужно создавать сотни пользовательских вызовов API. В идеале, я хочу связать их, используя что-то вроде обещаний: 

    // A component method
editModeOn(){
    this.props.dispatch(campaign_fetchAll().then(brand_fetchAll()).then(page_editModeOn());
}

К сожалению, я еще не заставил это работать. Я надеюсь, что кто-то может мне помочь. Если вам нужна дополнительная информация, я с удовольствием ее передам. Лучшие идеи также очень приветствуются:)

Заранее спасибо!

1 Ответ

0 голосов
/ 02 ноября 2018

Может ли быть использована функция обратного вызова для вас?

Так что обновите ваш код до 

export const brand_fetchAll = (callback) => {
return dispatch => {
    fetch(apiURL+'brand')
        .then(response => {return response.json();})
        .then(content => {
            dispatch({
                type: 'BRAND_STORE_ALL',
                content
            });

            callback();
        })
        .catch(error => console.log(error))
}}

// A component method
editModeOn(){
    // Fetch data
    this.props.dispatch(campaign_fetchAll());
    this.props.dispatch(brand_fetchAll(() => {
        // Open editor
        this.props.dispatch(page_editModeOn());
    }));        
}

Вы связываете обратный вызов с окончанием успешного завершения вызова API, однако вы не тесно связываете его с тем, что передаете, в зависимости от использования.

...