Реагирование: Инициализация состояния с несколькими асинкоми вызовами

Автор оригинала: Ejaz.

Работа с организацией и помогая им мигрировать свое приложение на основе jQuery, чтобы реагировать. Старая версия представляет собой монолит, созданный в Django, состоящий из статического HTML для отдельных страниц с jQuery, посыпанным по всему. Миграция проводится на небольших шагах с инъекцией реагирования на отдельные страницы и создание приложения на странице.

Сохранение его простым, общая структура приложений, разработанная для 1 контейнерного компонента и множественные презентационные компоненты. Состояние приложения инициализируется в компоненте контейнера, а части его передаются как реквизиты для соответствующих презентационных компонентов.

Больше на контейнерах и презентационных компонентах

Проблема: несколько вызовов Async, инициализируя состояние приложения случайным образом.

Ниже приведено состояние на странице детализации продукта.

    this.state = {
        product_detail: {},
        comments: []
    }

Поскольку приложение полностью находятся на основе передней работы, все вызовы AJAX начнутся в ComponentDidMount () Способ жизненного цикла компонента. Индивидуальные методы создают вызовы AJAX, чтобы получить соответствующую часть состояния и устанавливать данные в состоянии.

    getCommentsData () {
        this.makeAjaxCall(`https://reqres.in/api/users`, `GET`)
            .then(data => {
                this.setState({comments: data})
            });
    }

    getProductData () {
        this.makeAjaxCall(`https://reqres.in/api/users/2`, `GET`)
            .then(data => {
                this.setState({product_detail: data})
            });
    }

    componentDidMount () {
        this.getCommentsData();
        this.getProductData();
    }

Это привело к получению государства несколько раз в нескольких местах, и я понятия не имел, какой звонок Ajax будет окончен первым.

Добавьте к этому, установка состояния несколько раз повторно отображаемое приложение, предоставляющее ему милый эффект каждый раз, когда AJAX Call закончен.

Реализация: инициализация государства должно произойти только один раз и только в одном месте.

Это называется первоначальным состоянием по причине (дух!). Состояние не должно быть инициализировано несколько раз и не должно быть инициализировано случайно в случайных местах.

Решение: обещают. Все к спасению

С реализацией раствор был довольно простым. Мне нужно было найти способ ждать всех вызовов Ajax, чтобы завершить и установить состояние один раз только тогда, когда все вызовы AJAX закончены.

Скажи привет Обещать. Все

Изменение было довольно простым, вместо того, чтобы заполнить вызовы AJAX в отдельных методах, которые мне нужно вернуть Обещание от них

    getProductData () {
        return this.makeAjaxCall(`https://reqres.in/api/users/2`, `GET`);
    }

    getCommentsData () {
        return this.makeAjaxCall(`https://reqres.in/api/users`, `GET`);
    }

И в ComponentDidMount () использовать Обещание. Все () ждать, пока индивидуальные обещания закончат, а затем по-настоящему прояснить государство.

    componentDidMount () {
        Promise.all([this.getProductData(), this.getCommentsData()])
            .then(([product_detail, comments])  => {
                this.setState({
                    product_detail,
                    comments
                });
            });
    }

Вывод: окончательное рабочее решение

JS Widdle

Спасибо за чтение