Последовательность выполнения запросов в SPA React Redux?

Question

[Дима Моричев]

Я делаю SPA.
При некоторых событиях на клиенте, допустим отметили интересный товар, есть необходимость отправлять определенные данные этого товара на сервер и в зависимости от этого подгружать в правую часть SPA контент. Некий интерактив.

На клике по кнопке "Интересно" я вызываю функцию в которой делаю POST запрос на сервер и тут же делаю запрос в action, их 3. Желая получить контент соответствующему товару.

Проблема в том, что данные приходят не у всех. Т.е. при нажатии на кнопку "Интересно" подгружается данные который вызывает одни action, потом несколько раз пробуешь тоже самое и вот только тогда погружаются данные из остальных action.

Comments

[Дима Моричев]

Я на скидку могу предположить что POST запрос не успевает выполнится как уже идет GET запрос. Из-за этого не приходит правильный контент.

Answer 1

[xtalen]

Немного не понял в чем проблема. Было бы понятнее с кодом обработчика клика на кнопку и кодом action.
Предположу что ты вызываешь action друг за другом, оберни каждый вызов в SetTimeout(()=>{action()}, 0);

Должно быть что-то типа (без привязки к Redux):

onClick(data) {
    rest.post("url to backend", {data})
    .then((response) = > {
        setTimeout(() = > {
            AppDispatcher.dispatch({
                actionType: AppConstants.INTERESTED_1,
                data: response.data
            });
        }, 0);

        setTimeout(() = > {
            AppDispatcher.dispatch({
                actionType: AppConstants.INTERESTED_2,
                data: response.data
            });
        }, 0);

        setTimeout(() = > {
            AppDispatcher.dispatch({
                actionType: AppConstants.INTERESTED_3,
                data: response.data
            });
        }, 0);
    })
    .catch(() => {
        AppDispatcher.dispatch({
            actionType: AppConstants.SERVER_ERROR
        });
    });
}

Answer 2

[Макс Сысоев]

Наверное, нужно использовать Relay или его аналог для таких вещей.

Ещё способ - можно обернуть 2 запроса в один Action Creator; там уже выполнять очередь запросов и после них отправить один action.

Ещё - возвращать из Action Creator объект Promise.

P.S. не рекомендую вообще когда-либо оборачивать распространение action в нулёвый таймаут. Может привести к непредсказуемым последствиям

Comments

[xtalen]

А в чем непредсказуемость заключается? Задачи нет обработать все последовательно.
В классической реализации диспетчера setTimeout необходим, иначе ошибка 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.',
в redux должна быть ошибка: 'Reducers may not dispatch actions.'.
Скорее всего Дмитрий ее не видит, т.к. неаккуратно промиссы использует.

[Макс Сысоев]

У меня случалось состояние гонки у action'ов, когда делал их (все) через нулевой таймаут. Причём случайно.

[xtalen]

А гонка в любом случае будет. Это критично когда происходит перезапись состояния. Например, в задаче с поиском: отправился запрос на /search=p и /search=play, сначала пришел ответ "playstation" - соответствует актуальному состоянию, следом "playstation | polylyne" его перезаписывает. Это проблема, у которой частное решение.
А тут, как я понимаю, 3 разных объекта рендера, иначе глупо посылать на сервер 3 запроса в надежде, что ответы придут в том же порядке))