Уроки React. Урок 13. Часть 1.

react_13_1

Сегодня мы с Вами поговорим об асинхронных actions. Мы начнем доставать наши статьи из API. Как вы могли  заметить у нас уже работает простенький API для запуска которого нужно зайти в папку simple_api, выполнить в ней команду:

npm install

для того, чтобы там появились свои node models . После этого  у Вас cработает скрипт который запускает несколько процессов одновременно, это видно в package.json в корневой директории:


В нашем случае он запускает одновременно npm run dev и npm run api. Один поднимает API а другой запускает webpack dev server. С этих пор у нас на порту 3001 работает простая API:

http://localhost:3001/api/article

а на порту:

http://localhost:8080 – developer’s server.

В реальной жизни часто так и происходит, когда разработкой API занята другая команда, с которой вы можете встречаться достаточно редко. API может находиться у Вас где угодно: локально, удаленно, это не важно. Где-то работает Ваше API, а где-то локально работает Ваш dev server. Посмотрите на webpack.config.js:


В webpack devServer . Вам нужно будет настроить переадресацию, чтобы не было никаких сrossdomain запросов.  Все что у нас приходит на /api будет проксироваться на вашу API. Сейчас это localhost:3001, а далее это может какой-нибудь удаленный адрес. Вы делаете переадресацию и по обоим адресам у Вас будет доступ до article:

http://localhost:3001/api/article

http://localhost:8080/api/article

Таким образом все то, что будет приходить на localhost:8080 будет попадать на Вашу страницу, а все что приходит на /api будет переадресовываться на Вашу API.

Мы с Вами хотим получать все наши статьи не из fixtures.js, а из API, как в реальной жизни. давайте это реализуем. Сейчас по api\article\у нас отдаются все статьи без текстов, и комментариев. Т.к. получать все данные сразу не имеет никакого смысла, потому что они могут быть достаточно большими. Также комментарии нам придется получать с помощью дополнительного запроса, тогда, когда они нам понадобятся.

Для начала получим список статей из API и отобразим их по привычному адресу:

http://localhost:8080

Для этого сначала установим JQuery.  Установим мы его исключительно для того, чтобы делать AJAX запросы, наберите в console:

npm i jquery --s

Нам нужно сделать запрос на api\article\. Запросы мы будем делать в middlewareт.к. запросы это Side Effect.

Создадим файл /middlewares/api.js.

Сразу же нужно сказать о том, что мы будем разбивать наши actions на START, SUCCESS, FAIL. Зайдем в constants.js и добавим следующую запись:


Мы берем action LOAD_ALL_ARTICLESи далее добавляем к нему наши константы в зависимости от того, приходит к нам запрос или нет. Вернемся к /middlewares/api.js и сделаем import JQuery библиотеки и наших констант:


По аналогии с randomID.js где мы проверяли наличие флажка withRandomIdмы сделаем с API. Мы создадим  action creator , который будет называться LOAD_ALL_ARTICLESв AC/articles.js:


Возвращать мы будем такой же плоский объект. И у него будет флажок callAPI (ключ) и значение в виде /api/article. Теперь в middleware мы будем проверять, если у action будет callAPIзначит это тот который нас интересует, если нет то мы будем пропускать его дальше.

Продолжим пиcать логику в /middlewares/api.js:


Как видно из кода выше, если мы не получаем флажок в виде callAPI мы просто передаем управление дальше. Если же он есть, то мы будем делать JQuery  GET запрос. Прежде чем сделать обращение, мы с Вами передадим управление дальше, сказав, что мы начинаем загрузку. В .done, когда к нам придет ответ, мы возьмем его и передадим управление дальше. Наш type уже будет выглядеть как type + SUCCESSтакже мы с Вами передадим здесь responseи все остальное. Т.к. наш action может пройти через несколько middleware, например через randomID а потом через callAPI. Также поступим и с .fail. В итоге у нас action поделился на два action.

to-be-continued-13

We are looking forward to meeting you on our website soshace.com

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Уроки Express.js . Логгер, Конфигурация, Шаблонизация с EJS. Часть 2.

Favicon – это все connect Middleware, он смотрит, если url имеет вид favicon.ico, то он читает favicon и ...

3. Уроки Express.js. Шаблонизация с EJS: Layout, Block, Partials

В реальной жизни у нас обычно больше, чем один шаблон. Более того, если уж так ...

24.11.2016

Уроки Express.js. Основы и Middleware. Часть 2.

Всем привет! Давайте продолжим наш урок об основах Express и Middleware. Итог (добавим в ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy