Начните с Teunk Redux

Состояние является большой частью приложения React Application, поэтому Redux обычно связан с этим. Эти данные часто происходят из базы данных, которая требует запроса и ответа. Для некоторых приложений это сообщение может быть постоянной. Может быть сложно, пытаясь управлять исключительно внутри компонентов реагирования.

Это также вводит некоторые новые проблемы - что произойдет, если она медленно загружается, или вообще не загружается? Каждый компонент, касающийся асинхронных данных, должен будет содержать логику для обработки этих сценариев.

«Thunk» - это концепция, которая может помочь в этой ситуации. Каждый Thunk - это функция, которая возвращает другую функцию. Эта функция затем может быть вызвана в более позднюю точку, как обратный вызов. Если бы мы могли отправить Thunk вместо объекта действия, мы можем добавить некоторую дополнительную логику в реакции на другое событие.

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

• 20 блестящих плагинов JQuery

В этом руководстве мы будем использовать Thunks, чтобы помочь потянуть данные с сервера, а не из файла JSON, работая с Photoshare. - приложение для фотокомплектуя, питаемое redux.

Получил новый проект сайта, но нужно, чтобы он остался простой? Вот наши гиды в лучшем Строитель сайта и веб хостинг служба. Обмен файлами с другими? Получить ваши облачное хранилище верно.

Загрузите файлы Для этого учебника.

01. Установите зависимости

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

 / * Один терминал внутри / сайт * /
и GT; пряжа
и GT; Запуск пряжи
/ * Один терминал внутри / сервер * /
и GT; пряжа
и GT; Начало пряжи 

02. Настройте промежуточное ПО

Redux Thunk это промежуточное программное обеспечение - Функциональность, которая сидит между действиями и редукторами, которые могут измениться, как эти действия ведут себя. Redux поддерживает несколько наборов промежуточного программного обеспечения, которая охватывает все приложение. Они добавляются, когда магазин создан с помощью составить метод. Добавить промежуточное программное обеспечение на Createstore Метод в Index.js.

 Импорт {applymiddleware, compose}
из "redux";
Импорт Thunk из «Redux-Thunk»;
[...]
Const Store = Createstore (
укоренистый,
сочинять (
ApplyMiddleware (Thunk),
devtools.
Несомненно
); 

03. Настройка создателей действий

Первое, что нам нужно сделать сейчас, - это загрузить фотографии в галерею. Как и регулярные действия, нам нужны создатели Действия для различных государств, что примет асинхронный звонок. Большинство будет иметь Начните , успех и ошибка Действия. Они позволяют Redux знать, что занимается JavaScript. В Действия / Фотографии / Фотографии.js Создайте три создателя действий для этих разных состояний.

 Export Const LoadGalleryStart = () = & gt; ({
Тип: load_gallery_start});
Экспорт const ladgalleryscess =
Фотографии = & gt; ({
Тип: load_gallery_success,
фото
});
Export Const LoadGalleryError = () = & gt; ({
Тип: load_gallery_error}); 

04. Создайте Thunk для загрузки

TUKNS работает точно так же, как и создатели Действия. Мы все еще отправляем возвращаемое значение, но на этот раз он возвращает функцию вместо объекта. Промежуточное программное обеспечение, которое мы настроили ранее, пройдут метод отправки в возвращенную функцию. Это позволяет нам отправлять больше действий для Redux после первоначальной отправки. Создать loadgallery Метод, который возвращает функцию. На данный момент он отправляет свое действие, чтобы показать, что галерея все еще загружается.

 Export Const Ladgallery = () = & gt;
Отправка = & gt; {
Отправка (LoadGalleryStart ());
}; 

05. Загрузить данные с сервера

Теперь мы готовы начать вытеснять с сервера, который мы создали в начале. Мы можем сделать это с помощью Axios. - Пакет, предназначенный для работы с обещаниями в разных браузерах. импорт Axios. и сделать запрос на фотографии в пределах loadgallery Отказ Если обещание решается, отправьте действие успеха, и если не отправляйте действие ошибки. С этим структура Thunk завершена.

 Импортные аксиос из «Axios»;
[...]
Возврат Axios.
.get ("http: // localhost: 3001 / photos")
. Затем (ответ = & gt; отправка (
loadgallerysuccess (Repeate.data)))
.catch (() = & gt; отправка (
LoadGalleryError ())); 

06. Отправьте The Thunk

Thunk ничего не сделает, пока он не будет отправлен. Мы можем сделать это в реактивный компонент, как и другие действия. Хорошее время начать загрузку фотографии, когда пользователь просматривает главную галерею. Мы можем использовать React's ComponentDidmount. Способ жизненного цикла в качестве триггера, после проверки галереи еще не загружен. В Компоненты / контейнер / галерея / GALLERY.JS Отправка А. loadgallery действие, добавив его в mapdispatchtopops. и называть это в пределах ComponentDidmount. Отказ

 ComponentDIDMount () {
Если (! this.proops.photoSloaded) {
this.props.loadgallery ();
}
}
Export const mapdispatchtoprops =
 Отправка = & gt; ({
LoadGallery: () = & gt;
Отправка (LoadGallery ()),
}); 

07. Добавить фотографии на успех

Когда фотографии возвращаются с сервера, мы отправляем Load_gallery_success. действие с фотографиями. Мы должны получить это в состояние через фото Редуктор. Добраться до Редукторы / Фотографии / Фото.js и добавить случай для действия успеха. Полезная нагрузка содержит все фотографии в качестве массива. Как только состояние обновляется, селектор фото проходит фотографии до компонента галереи для отображения.

 Дело load_gallery_success:
вернуть действие .Фото; 

08. Настройте пользовательский интерфейс

В настоящее время фотографии внезапно появляются после того, как они загружены. На более медленном соединении пользователь сможет просматривать пустой экран до завершения запроса, если это произойдет. Действия, которые мы отправляем на загрузочные фотографии, также могут быть подняты в редукторе пользовательского интерфейса, чтобы сохранить интерфейс в курсе того, что происходит. Обновите флаги загрузки и ошибок в редукторе UI на Редукторы / ui / ui.js Отказ

 Case Load_Gallery_Error:
Возвращение {... Государство,
Загрузка: false, ошибка: true};
Case Load_Gallery_Start:
Возвращение {... Государство,
Загрузка: True, Error: false};
Дело load_gallery_success:
Возвращение {... Государство,
Загрузка: false}; 

09. Добавьте селектор загрузки и ошибки

Как и с самими фотографиями галереи, нам нужны селекторы, чтобы получить различные значения пользовательских интерфейсов UI из Redux. Мы можем передавать их в галерею, которая затем сделает разные элементы, если либо один правда. В Селекторы / ui / ui.js Добавьте пару функций, чтобы получить значения.

 Export Const IsgallerErrored =
 состояние = & gt; State.ui.Error;
Export Const IsgalleryLoading =
 состояние = & gt; State.ui.loading; 

10. Добавьте данные в GalleryContainer

С помощью селекторов готовы, теперь они могут быть добавлены к Галерея Контейнерный компонент. Добавление их здесь означает, что компонент, ответственный за отображение галереи, не нужно знать о том, как пришла данные. Добраться до Контейнер / галерея / галерея.js и добавьте селекторы в MapStatetOronops. Отказ Сделайте постоянные значения, чтобы помочь отобразить состояние на следующем шаге.

 const {Ошибка, загрузка,
 Фотографии} = это.
[...]
Экспорт COND MAPSTATETOPOOPS =
 состояние = & gt; ({
Ошибка: isgalleryerrored (штат),
Загрузка: isgalleryloading (штат),
 }); 

11. Показать загрузку и состояние ошибки

Пока у нас есть реквизиты ошибки и погрузки, в настоящее время нет UI, чтобы указать, когда они активны. Эти реквизиты являются логическими значениями, что означает, что мы можем переключить отображение компонентов, когда они верны. Обновить метод рендеринга, чтобы убедиться, что & lt; Ошибка и GT; и & lt; loading & gt; Компоненты рендерируют вместо галереи при необходимости.

 Если (ошибка) {
вернуть & lt; ошибка / & gt;
}
Если (загрузка) {
вернуть & lt; loading / & gt ;;
} 

12. Снова извлеките галерею

С нагруженной галереей мы можем перейти к отдельной фотографии. Нажав на любую из фотографий и обновления страницы не загружает фотографию резервного копирования, так как на этой странице нет инструкции, чтобы загрузить галерею. Открыть Контейнер / фото / фото.js и загрузить галерею в ComponentDidmount. как в Галерея компонент. То Фотографировал Проверка не попробует загрузить фотографии снова, если они уже загружены в галерею.

 Если (! This.proops.photoSloaded) {
this.props.loadgallery ();
} 

13. Добавьте новый комментарий

Пользователь может нажать на фото, где они хотят оставить комментарий. Фото презентационный компонент будет запускать addwomment. Функция опоры, когда это происходит. Внутри addwomment. Функция, рассчитайте точку, в которой пользователь нажал на фото. Сервер требует крутого целочисленного процентного значения, когда он сохраняется.

 const photo = e.target
 .getBoundingClientRect ();
const top = e.clientx - Фото.Left;
const слева = e.cclienty - photo.top;
const toppc = math.rund ((вверх /
 фото .width) * 100);
const leftpc = math.rund ((слева /
 Фото. Hight) * 100); 

14. Расскажите redux о комментарии

При рассчитанном положении, мы должны сообщить redux о комментарии, поэтому он может отображать форму комментариев. Уже есть действие, чтобы добавить новый комментарий на экране. Добавлять addwomment. в mapdispatchtopops. И назовите это после того, как мы рассчитали положение щелчка.

 this.proops.addnewcomment (
 TOPPC, LEALPC);
[...]
Export const mapdispatchtoprops =
 Отправка = & gt; ({
addwecment: (верх, слева) = & gt;
Отправка (Addnewcomment (Top, слева)),
});

15. Скажите фото о новом комментарии

Когда новая информация о комментариях передается на Redux, нам нужно передать его в фотоседационный компонент. Это позволяет ему показать форму в этой позиции. Найди Getnewcomment. селектор, добавьте его MapStatetOronops. и пройти опоры в & lt; Фото и GT; Отказ

 Экспорт Const MapstatoPOOP =
 (состояние, реквизиты) = & gt; ({
Новоприемник: GetnewComment (штат),
});
& lt; photo [...] Newcomment = {
 This.props.newcomment} / & gt; 

16. Назовите Thunk в комментарии

Нажатие на фотографию теперь приведет к новой форме комментариев. Это его собственный подключенный компонент. Когда форма представлена, она называет Отправить комментарий Функция опор и проходит. Это Thunk, который мы сделаем. Открыть Контейнер / Новоприемник / NewComment.js и добавьте Thunk на mapdispatchtopops. Отказ Пройти этот опоры в представленный презентационный компонент.

 & lt; Newcomment [...]
 keycomment = {keferment} / & gt;
Export const mapdispatchtoprops =
 Отправка = & gt; ({
Скажите: комментарий = & gt; отправлять(
Отправить (комментарий))
});

17. Соберите контент для Thunk

Thunk Чтобы добавить новый комментарий, имеет аналогичную структуру для получения галереи, включая действие начала, успеха и ошибки. Есть дополнительный аргумент, переданный в этот Thunk - галстук функция. Это позволяет прямому доступу к текущему состоянию, чтобы получить данные из него. Создать Отправить комментарий тщательно Действия / Newcomment / NewComment.js Отказ Каждый комментарий связан с фото и пользователем. Для этого учебника идентификатор пользователя жестко закодирован в Пользователь Редуктор.

 Экспорт Const Suppormention = комментарий
 = & gt; (отправка, getstate) = & gt; {
Отправка (kebnectommentStart ());
const turchphotoid =.
getCurrentPhotoid (getstate ());
const user =
getcurrentuser (getstate ());
const {уходит, топ} =
getnewcomment (getstate ());
}; 

18. Опубликовать запрос

Со всеми необходимыми данные на месте мы можем представить комментарий. Axios имеет А. почтовый метод иметь дело с ПОЧТОВЫЙ Запросы, со вторым аргументом, являющимся данными для отправки этого запроса. Добавьте запрос в Thunk, передавая данные в случае змеи, чтобы соответствовать тому, что ожидает сервера.

 Axios возврата
.почтовый(
"http: // localhost: 3001 / Комментарии", {
user_id: user.id,
photo_id: currentphotoid,
комментарий,
оставили,
верх
}) 

19. Обработка успеха и ошибки

Если обещание от Axios решает или отклоняет, мы должны сообщить об этом приложении. Если он разрешается успешно, сервер будет возвращать содержимое комментариев. Мы должны пройти это в случае успеха. Если он отклоняется, выпустите ошибку действия. Обновить обещание с тогда и ловить блоки.

. Затем (((данные: {
 ID, комментарий, левый, верхний}}) = & gt;
отправлять(
Откидка (
ID, комментарий, слева, верх,
Пользователь, currentphotoid)
Несомненно
Несомненно
.catch (() = & gt; отправка (
 kebnectommenterError ())); 

20. Добавить комментарий к фото

Сейчас, как только комментарий успешно добавлен, он очищается с экрана, но не виден до тех пор, пока не обновляется страница. Мы можем обновить редуктор фотографий, чтобы забрать новый комментарий и добавить его в свой массив комментариев, чтобы отобразить как остальные из них. Откройте редуктор / фотографии / фотографии.js и добавьте корпус для обработки действий. Создайте копию состояния, чтобы убедиться, что мы не случайно мутируем существующее состояние.

 Чехол Submit_Comment_Success:
const {ID, комментарий, верх, слева,
Пользователь, photoId} = Action.PoyLoad;
const newstate = json.carnse (
Json.stringify (штат));
const photo = newstate.find (
фото = & gt; фото.id === photoId);
photo.comments.push ({{
ID, комментарий, слева, верх, пользователь
});
вернуть Ньюстата; 

21. Скрыть другие комментарии

Наконец, если другой комментарий открыт, и пользователь хочет добавить новый комментарий, пользовательский интерфейс становится слишком загроможден. Мы должны скрыть окно комментариев, если состоит новый комментарий. Мы можем подключить к существующему Add_new_comment. действие, чтобы очистить комментарий ценить. Добраться до Редуктор / ui / ui.js и добавить дело для этого.

 Чехол add_new_comment:
возвращаться {
...государственный,
Commentopen: undefined
}; 

Эта статья была первоначально опубликована в выпуске 283 журнала Creative Web Design Веб-дизайнер Отказ Купить проблему 283 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• 5 удивительных apis javascript
• Разработка многоразовых реагирования
• 9 из лучших JavaScript Frameworks