Обещания не выполняются через Redux

Question

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

export function waitForAll() {
    return function (dispatch, getState) {
        Promise.all([
            dispatch(getCharacteristics()),
            dispatch(getItems())]
        ).then(()=>{
            let state = getState();
             dispatch(update(state))
        }).catch(function(err){
            console.log(err);
        });
    }
}

И вот две функции, вызываемые для этого обещания:

export function getCharacteristics() {
    return function (dispatch) {
        axios.get('api/charac').then((response) =>
        {
            dispatch(fetchCharacteristics(response.data));
        }).catch(error =>{
            console.log(error);
        });
    }
}

И

export function getItems() {
    return function (dispatch) {
        axios.get('api/45897').then((response) =>
        {
            dispatch(fetchItems(response.data.equipements));
        }).catch(error =>{
            console.log(error);
        });
    }
}

Мои состояния не обновляются, это означает, что мои обещания не обрабатываются должным образом, у меня начальное состояние, как [].

Альтернативой может быть componentDidMount () в React для вызова этой функции, но я не уверен, как проверить, что ОБА состояния загружены правильно (разные компоненты)

Я не могу понять, как я могу заставить его работать, любая помощь будет приветствоваться!

Answer 1

Вы на самом деле не возвращаете обещание. Организуйте свой код, чтобы вернуть обещание (а не просто разрешить его), и тогда вы сможете использовать Promise.all

Пример:

async function promise1 () {
    const promise = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    return promise.json();
};
async function promise2 () {
    const promise = await fetch('https://jsonplaceholder.typicode.com/todos/2');
    return promise.json();
};


async function getAllPromises() {
    const results = await Promise.all([promise1(), promise2()]);
    console.log(results);
};

getAllPromises();

В принципе, я думаю, что вы можете просто вернуть axios.<httpverb>

Пример (вероятно, я не смогу запустить ваш код):

export function waitForAll() {
    return function (dispatch, getState) {
        Promise.all([
            dispatch(getCharacteristics()),
            dispatch(getItems())]
        ).then(()=>{
            let state = getState();
             dispatch(update(state))
        }).catch(function(err){
            console.log(err);
        });
    }
}

export function getCharacteristics(dispatch) {
    return new Promise ( (resolve, reject) {
        axios.get('api/charac').then((response) =>
        {
            resolve(dispatch(fetchCharacteristics(response.data)));
        }).catch(error =>{
                reject(error);
            console.log(error);
        });
    });
}

export function getItems(dispatch) {
    return new Promise ((resolve, reject)  {
        axios.get('api/45897').then((response) =>
        {
            resolve(dispatch(fetchItems(response.data.equipements)));
        }).catch(error =>{
                reject(error);
            console.log(error);
        });
    });
}