Чтобы делать AJAX-запросы в Redux, используй redux-thunk middleware. Этот middleware позволяет писать асинхронные action creators, которые могут диспетчить несколько экшенов во время жизненного цикла запроса.
Redux-thunk позволяет action creators возвращать функции вместо обычных объектов экшенов. Эти функции получают dispatch как параметр, что даёт возможность диспетчить экшены до, во время и после асинхронной операции.
export function fetchAccount(id) {
return dispatch => {
dispatch(setLoadingAccountState());
fetch(`/account/${id}`)
.then(response => {
dispatch(doneFetchingAccount());
if (response.status === 200) {
dispatch(setAccount(response.json()));
} else {
dispatch(someError());
}
});
};
}
function setAccount(data) {
return {
type: 'SET_ACCOUNT',
data: data
};
}
Для сложных асинхронных сценариев в крупных приложениях рассмотри Promise-based подход Redux Thunk или Redux Saga.
Middleware redux-thunk позволяет action creators возвращать функции, которые получают dispatch в качестве параметра, что позволяет dispatching нескольких actions во время асинхронной операции.
Новый — ещё не проверен сообществом
Вы