Как вернуть обещание от действия, используя thunk и useDispatch (hook-реагирующая перехватчик)? - PullRequest
Новая
       10

Как вернуть обещание от действия, используя thunk и useDispatch (hook-реагирующая перехватчик)?

3 голосов
/ 21 июня 2019

Я только начал изучать перехват-ответную реакцию, и мне было интересно, как вернуть обещание, если я использую thunk и useDispatch(). По сути, я хочу добиться следующего: 

const dispatch = useDispatch();

dispatch(myAction(...args)).then((result) => {
    ...do something with result
});

Когда мои действия выглядят так: 

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        Promise.resolve(arg1 + arg2);
    }
}

Я значительно упростил свою проблему, но это, по сути, то, с чем я имею дело. Когда я пытаюсь выполнить вышеуказанное действие, я получаю сообщение об ошибке dispatch(...).then не является функцией.

Я знаю, что редукционные хуки довольно новы, но мне было любопытно, заставил ли кто-нибудь это сработать или хотел бы найти решение. Я чувствую, что сделать эту работу относительно легко, но я в растерянности. Если вам нужна дополнительная информация, дайте мне знать. Заранее спасибо за любую помощь!

1 Ответ

2 голосов
/ 21 июня 2019

Как dispatch возвращает одно из двух:

  1. Для действия синхронизации (например, dispatch ({type: 'ACTION'}) он вернет объект действия ({type: 'ACTION'} в моем примере)

  2. Для групповых действий (создатели действий, которые возвращают функции) он возвращает тот же результат, что и создатель действий.

Так что для вашего случая просто добавьте return заявление для вашего создателя действия 

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        return Promise.resolve(arg1 + arg2);
    }
}

Вы можете сделать myAction более реалистичным, как, например, 

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        return fetch(/* some request */).then(response => dispatch ({type: 'RESPONSE_RECEIVED', payload: response}));
    }
}

В этом случае также будет получено обещанное обещание. Объектом обещания будет объект {type: 'RESPONSE_RECEIVED', payload: response}.

Или вы можете установить произвольное содержимое для возвращенного обещания, например, 

const myAction = (arg1, arg2) => {
    return (dispatch, getState) => {
        return fetch(/* some request */).then(response => { 
            dispatch ({type: 'RESPONSE_RECEIVED', payload: response})
            return response;
        }
    }
}

В этом примере разрешенное обещание будет возвращено, но оно содержит response внутри.

Во всех случаях вы можете связать, как хотите 

dispatch(myAction(...args)).then((result) => {
    ...do something with result
});
...