Уроки React. Урок 11. Pt.1.

react_11_1

На предыдущем уроке мы научились более удобным способом писать reducers используя удобные API для добавления/удаления элементов, не беспокоясь о том, что мы что-то изменим по дороге.

Теперь если мы с Вами посмотрим на наше приложение и откроем какую-нибудь статью, то увидим в console warnning. Наши propTypes предупреждают нас о наличии проблемы, еще до того момента как мы до нее доберемся. Это огромный плюс – то что мы их написали. О чем говорит этот warnning ? Он говорит о том что мы ожидали получить в Comment объект с комментарием, а сейчас передаем туда число. И действительно если открыть комментарии, то их там не будет. Для того чтобы они появились нам нужно пойти в часть storeкоторая отвечает за commentsи достать оттуда необходимые комментарии. Аналогично тому, что мы сделали с Вами со статьями, нам предстоит сделать с комментариями.

Изменим reducer/comments.js следующим образом:

А также создадим файл reducer/utils.jsи вынесем туда часть нашей логики, которую будет удобно переиспользовать в дальнейшем, а не просто ее копировать:

Здесь наши с помощью recordsFromArray данные превращаются в immutable.js структуру.

Также изменить reducer/articles.js:

И последний шаг изменим import в reducer/index.js:

Теперь нам нужно эти комментарии как-то достать, раньше они были внутри статей, а теперь там есть только ссылки. Чтобы это сделать мы пойдем в то место, где мы их использовали, а именно в components/Article/index.js. Мы должны решить, будем мы получать их в commentList или же в самом компоненте статьи. Забегая вперед сейчас мы отдадим предпочтение commentList . Нам сейчас нужно обернуть наш компонент в connect и достать по id комментариев сами комментарии. Мы можем это сделать в компоненте Article/index.js, здесь у нас уже есть connect и мы его можем использовать, чтобы достать comments из store. А можем это сделать в commentList
уже здесь получив id просто достав их из store. Зайдем в commentListи сделаем import:

Далее в самом низу изменим  export default:

Помимо аргумента state у Вашего store есть второй props, которые и так приходили в Ваш компонент. А приходит в props у нас comments. Давайте это используем. Чтобы не путаться назовем то что у нас будет в return – commentObjects, подчеркивая, что это уже объект. Здесь мы пройдемся по  массиву комментариев и с помощью  immutable map и по id будем доставать из state наши комментарии (т.е. records комментариев).

В render мы уже работаем с нашим объектом, поэтому код станет выглядеть так:

Также в reducer/articles.js изменим фильтрацию, так как нам она больше не нужна в том виде в котором она была написана.

Мы просто описываем какую статью нужно удалить из объекта. Если нужно добавить вы используете set()если обновить то update().

Это пригодиться в будущем домашнем задании. Также Immutable.js прекрасно работает с глубокой вложенностью. Если вдруг Вам нужно обновить комментарии, которые вложены в статью которые, вложены в объект со всеми статьями, который возможно вложен в еще какой-нибудь объект, который помимо всего хранит другие всевозможные данные, то вы замучаетесь писать функции-обертки. Для таких случаев в Immutable.js есть:

Проверяем, все прекрасно работает!

Мы с Вами уже нормализировали данные и храним отдельно статьи и комментарии, это пойдет на пользу когда мы будем читать данные с API так как очень часто REST API отдают данные в таком виде. Т.е. end points отвечают за какие-нибудь ресурсы, например за статью или за комментарий и далеко не всегда у вас есть API который сразу готов отдать древовидную структуру статьи со всеми комментариями и.т.д. Такую проблему решает GraphQL например. Relay и GraphQL это React структура – то что Facebook использует у себя для fetching’а данных, но это уже довольно сложные темы. Но обычно наш API будет в таком виде:

http://localhost:8080/api/article

Отдельно будет API для комментариев:
http://localhost:8080/api/comment

И нужно будет заставить их работать вместе (“подружить” их). Чем мы в дальнейшем и займемся, получая все статьи, комментарии из реального API.

Далее мы продолжим знакомиться с Redux API  и посмотрим что же такое Middleware. Все что мы до этого момента делали прекрасно описывалось чистыми функциями и в принципе в Redux все стоит делать чистыми функциями, это и action creators и reducers. Они получают на входе старые данные и action и возвращают на выходе новый объект с новыми статьями, не меняя ничего во “внешнем мире”.

С другой стороны в реальной жизни не все можно описать чистыми функциями, иногда нам нужны side-effects – это любое обращение к API, Logging, Reporting и.т.д. Все это вынесено в middleware . Это то что находиться между тем как вы произвели dispatch над actionи тем как это попало в Ваши reducers.

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. Итог (добавим в ...

3 comments

Categories

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