Как сделать несколько запросов API в Promise в действии Redux

Question

Я работаю с React/Redux в проекте, и мне нужно сделать 2 отдельных запроса API, но второй запрос зависит от первого возврата без каких-либо проблем. В приведенном ниже примере действия я пытаюсь заключить оба вызова в обещание, но это не совсем работает (получение Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. ошибка в консоли). Мне не обязательно делать что-либо с данными ответа в результате обоих вызовов. Мне просто нужно, чтобы они возвращали статус 200 или ошибку.

Примечание. К сожалению, я не могу использовать async / await для этого примера. Спасибо!

export default () => {
    const url = '/api';
    const options = {...}
    const otherOptions = {...}

    return new Promise((resolve, reject) => {
        return dispatch =>
            // First API request
            axios.post(url, options)
                .then(responseA => dispatch({ type: RESPONSE_A_SUCCESS }))
                .then(() =>
                    // Second separate API request

                    axios.post(url, otherOptions)
                        .then(responseB => { 
                            dispatch({ type: RESPONSE_B_SUCCESS });
                            resolve();
                         })
                )
                .catch(error => {
                    dispatch({ type: errorActionType, error: error });
                    reject(error);
                });
    });
};

Answer 1

Ваш код имеет 2 проблемы:

1. Он возвращает обещание, которое не является "простым объектом".
2. Вы вкладываете обещания, а не присоединяете их последовательно

Попробуйте это вместо этого:

export default () => {
    const url = '/api';
    const options = {...}
    const otherOptions = {...}

    return dispatch =>
        axios.post(url, options)
            .then(responseA => dispatch({ type: RESPONSE_A_SUCCESS }))
            .then(() => axios.post(url, otherOptions))
            .then(responseB => dispatch({ type: RESPONSE_B_SUCCESS }))
            .catch(error => {
                dispatch({ type: errorActionType, error: error });
                reject(error);
            });
    });
};