Руководство по написанию Redux стуком действий Творцов, которые делают выполнять HTTP-запросы с выборки
преамбулу
Этот пример использует изоморфными-выборки, которая является библиотека на основе Обещание для делая запросы HTTP. Однако вы можете запустить этот пример, используя другую библиотеку запросов на основе обещаний, такую как Axios, и она все равно будет работать. Вы можете обернуть свой собственный HTTP-запрос в обещание, если не хотите использовать одну из этих библиотек.
Быстрый Redux Thunk Пример
Во-первых, здесь является самодостаточной пример заимствован из перевождь-Thunk документы
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
// set up store with redux thunk
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
// thunk action creator
function makeASandwichWithSecretSauce(forPerson) {
return function (dispatch) {
return fetchSecretSauce().then(
sauce => dispatch(makeASandwich(forPerson, sauce)),
error => dispatch(apologize('The Sandwich Shop', forPerson, error))
);
};
}
// we can now dispatch the result of our thunk action creator like any other action
store.dispatch(makeASandwichWithSecretSauce('bob))
ПРедСТАВИТельСТВО statefulness-запроса HTTP с действиями Redux
Из документов Redux:
Когда вы вызываете асинхронный API, есть два важных момента в времени: момент начала вызова и момент, когда вы получаете ответ (или таймаут). Сначала нам нужно определить действия и их создателей , которые связаны с асинхронным вызовом внешнего ресурса для любого данного идентификатора темы.
Есть три возможных состояния обещание, которое представляет запрос API:
- Pending (просьбу)
- правдивое (запрос успешно)
- Отклонено (Сбой запроса - или тайм-аут)
Основные действия Создатели, представляющие запрашиваемое состояние запроса
Хорошо, давайте напишем создателей основных действий, которые нам понадобятся для представления состояния запроса для данного идентификатора темы.
const fetchPending = (topicId) => {
return { type: 'FETCH_PENDING', topicId }
}
const fetchFulfilled = (topicId, response) => {
return { type: 'FETCH_FULFILLED', topicId, response }
}
const fetchRejected = (topicId, err) => {
return { type: 'FETCH_REJECTED', topicId, err }
}
Обратите внимание, что ваши редукторы должны надлежащим образом выполнять эти действия.
Logic для одного выборки действия создателя
Fetch обещание библиотека на основе запроса. Таким образом, метод axios.get делает запрос к данному URL и возвращает обещание, что будет решена в случае успеха в противном случае это обещание будет отклонено
import fetch from 'isomorphic-fetch'
const makeAPromiseAndHandleResponse = (topicId, url, dispatch) => {
return fetch(url)
.then(response => {
dispatch(fetchFulfilled(topicId, response))
})
.catch(err => {
dispatch(fetchRejected(topicId, err))
})
}
Если наш запрос HTTP успешно наше обещание будет решена и код в. Затем будет выполнено. Это отправит действие FETCH_FULFILLED для нашего идентификатора темы с ответом нашего запроса (наши данные темы)
Если запрос HTTP не увенчался успехом, наш код в .catch будет выполнен и отправлен действие FETCH_REJECTED, которое будет содержать идентификатор темы и ошибка, возникшая во время запроса.
Здесь мы размещаем логику обработки ошибок запроса. Это может включать в себя отправку одного или нескольких дополнительных действий, которые могут повторить попытку HTTP-запроса или отправить другой альтернативный URL-адрес.
Поскольку это асинхронный процесс, мы можем использовать создателя thunk action, который будет использовать промежуточное ПО Redux-thunk, чтобы позволить нам отправлять дополнительные асинхронные действия в будущем.
Как работает создатель Thunk Action?
Наш создатель действия thunk имеет возможность отправлять несколько действий в будущем.
Набор действий, которые он будет отправлять, дает информацию нашим редукторам о состоянии нашего HTTP-запроса.
Слово Thunk является синонимом просроченной оценки.
Этот единственный создатель действия thunk - это создатель действия, который будет обрабатываться нашим промежуточным программным обеспечением redux thunk, поскольку он соответствует сигнатуре, связанной с создателями thunk action, то есть возвращает функцию.
Написание нашего стука действия создателя
export const fetchSomeStuff = (url) => {
return dispatch => {
fetchData().then(
response => dispatch(setOurData(response.data)),
error => dispatch(apologise(error))
);
};
}
Наш преобразователь действие создателя возвращает функцию. Эта функция может возвращать все, что угодно, как любая нормальная функция, поэтому, если мы хотим, мы можем установить ее, чтобы вернуть обещание.
export const fetchSomeStuff = (url) => {
return dispatch => {
return fetchData().then(
response => dispatch(setOurData(response.data)),
error => dispatch(apologise(error))
);
};
}
Функция fetchSomeStuff выше, является преобразователь действия создателя, который вызывает выборку из изоморфной-выборки. Поэтому этот создатель действия возвращает обещание.
Поскольку мы возвращаем эту функцию внутри функции, возвращаемой нашим создателем действия thunk, когда мы вызываем fetchSomeStuff (наш создатель действия thunk), мы получим обещание. Это очень полезно, особенно для тестов, где мы могли бы проверить, что определенные действия отправляются в определенный момент времени после вызова создателя thunk action.
Наш создатель действия thunk возвращает функцию, которую мы возвращаем в нашем создателе действия fetchSomeStuff thunk.
Вот код внутри Redux стуком, что делает это:
if (typeof action === 'function') {
return action(dispatch, getState);
}
Так что, если мы называем
fetchSomeStuff('www.example.com')
мы вернулись функцию
Однако если мы посылаем fetchSomeStuff
store.dispatch(fetchAllItems('www.example.com'))
мы получили обещание.
Разница между этими двумя строками кода заключается в том, что при отправке нашего создателя действия thunk вместо того, чтобы просто наизусть назвать его, он проходит цепочку промежуточного программного обеспечения. Redux thunk знает, как справляться с функциями и будет их называть.
Так по существу это то, что происходит, когда перевождь-преобразователь промежуточного слоя конфигурируется и мы называем store.dispatch
У нас есть, что получает преобразователь, переданную
function thunkActionCreator(){
return function middlewareInjectsStoreMethods({dispatch, getstate}){
}
}
Когда мы посылаем это действие создателя
return action(dispatch, getState, extraArgument);
Этот код, который мы видели ранее, сокращенно будет выполнен
if (typeof action === 'function') {
return action(dispatch, getState)
}
и возвращает результат вызова вложенной функции в нашем стуке действия создателя
function thunkActionCreator(){
return function middlewareInjectsStoreMethods({dispatch, getstate}){
}
}
if (typeof action === 'function') {
return action(dispatch, getState)
}
действие представляет наш творец преобразователя действий в то время вызова действия внутри означает, что мы вернуть вложенную функцию под названием middlewareInjectsStoreMethods тогда как при вызове
return action(dispatch, getState)
возвращает нашу вложенную функцию (middlewareInjectsStoreMethods) и предоставляет методы отправки и getState магазина.
Мысленно мы можем думать о Redux-стуком, как это делает
if (typeof thunkActionCreator === 'function') {
return function middlewareInjectsStoreMethods({dispatch, getstate}){}
}
Итак, теперь мы можем понять, почему мы должны вернуть функцию в нашем Redux санк действия создателя. Наш создатель действия нуждается в доступе для отправки дальнейших действий в будущем. Возвращая функцию, мы можем назвать ее позже, а STILL - доступ к отправке. Этот изящный способ делать вещи является частью того, что я поклонник Redux.