Async await в actionCreator, должен ли я вернуть результат?
В моем actionCreators я вызываю некоторые конечные точки API для отдыха в действии, например. UPDATE_CART_ITEM и др.
Сначала я использовал аксиомы типа return axios()...:
export const login = (username, password) => (dispatch) => {
dispatch(requestLogin())
const URL = `${USERS_URL}?username=${username}&password=${password}`
return axios(URL)
.then((response) => {
return response.data
})
.then((user) => {
dispatch(loginSuccess(user))
// save the user on localStorage
localStorage.setItem('user', JSON.stringify(user))
// direct the logedin user to the games page
history.push('/')
})
.catch(() => {
return dispatch(loginFailure())
})
}
Теперь я использую async / await вот так:
// On payload i have the obj: {prId: 'xxxxx'}
export const updateCartItem = (payload) => async (dispatch) => {
const response = await fetch('cart/update',
{
body: JSON.stringif (payload),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
method: 'POST',
})
// I m not sure if i have to return the result
const result = await response.json()
// I dispatch the action with the payload
await dispatch(return {
payload,
type: UPDATE_CART_ITEM,
})
} catch (err) {
dispatch(cartActionFail(err))
}
}
Итак, внутри функции updateCartItem, как мне обращаться с result?
Поскольку я передаю payload редуктору, похоже, он мне не нужен.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вероятно, вы захотите сделать что-то вроде этого:
dispatch({ payload: response, type: UPDATE_CART_ITEM })
Насколько я знаю, dispatch(return { /*...*/ }) не имеет смысла, а dispatch() не возвращает обещание, поэтому нет смысла его ждать.
В общем, если вы хотите заменить цепочки обещаний на async / await, то вам нужно заменить foo.then(bar => { baz(bar); }) на const bar = await foo; baz(bar);.
Если вам нужно немедленно получить результат, вы должны отправить такое действие, как UPDATE_CART_ITEM_SUCCEED, в противном случае ничего не делать.
Кстати, я рекомендую вам использовать redux-saga или redux-thunk для обработки побочных эффектов вашего приложения, таких как вызовы API.
Если вы используете ту же полезную нагрузку для создателя действий, что произойдет, если что-то пойдет не так на вашем сервере? Ваша серверная часть не изменится, но ваше состояние не будет знать об этом и обновится с помощью полезной нагрузки. Вот почему вы должны использовать здесь некоторую проверку ошибок. Кроме того, лично я использую последний результат в качестве полезной нагрузки для создателей моих действий, а не исходную полезную нагрузку.
export const updateCartItem = payload => async ( dispatch ) => {
try {
const response = await fetch(
"cart/update",
{
body: JSON.stringif ( payload ),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
method: "POST",
}
);
if ( !response.ok ) { throw new Error( "response error" ); }
const result = await response.json();
return dispatch( {
payload: result,
type: UPDATE_CART_ITEM,
} );
} catch ( error ) {
return dispatch( cartActionFail( error.message ) );
}
};
Вы можете изменить и улучшить эту логику в соответствии с вашими потребностями. Как отметил @ vkarpov15, dispatch явно не использует return и не возвращает обещание, поэтому вам не нужно ждать там.
Я отредактировал свой ответ. Да, вы правы, если произойдет ошибка, try / catch поймают ее, но без ошибок, если что-то пойдет не так, ваше состояние каким-то образом изменится. Конечно, это просто личный способ справиться с логикой. Я предпочитаю использовать такой результат, так как могу видеть, что возвращается к моему состоянию.
Действительно, в этом случае я могу использовать «результат» в качестве полезной нагрузки. Но разве try {} catch () не выдает мне ошибку, что-то происходит на сервере?