Уроки React . Урок 9


Всем привет! Сегодня начнем наш урок с домашнего задания, сделав его вместе. Главной целью этих уроков является  помочь читателю научиться думать категориями данных – это является основой функционального программирования как такового. когда вы любую систему, например UI, вы описываете  набором данных. Пока в наших уроках мы делали все самыми простыми способами. У нас были статьи которые содержат в себе все необходимое, счетчик который содержит в себе число и т.д. Мы пока не делали ничего сложнее, не объединяли все эти элементы, мы не думали какие данные стоит хранить в store а какие в state компонентов. Поэтому давайте все это обсудим. Во-первых, какие данные и где следует держать?

В идеале в store должна храниться вся информация которая достаточна для описания вашего приложения , т.е. у вас в state компонентах ничего не должно быть, но на практике это не совсем так, и нет смысла переносить некоторые элементы из state в store. Например бывают проекты где при работе с формами при каждом нажатии изменения заносятся в state, с нашей точки зрения это лишнее. При работе с довольно стандартным приложением вы должны хранить в store такие данные которых будет достаточно для полного восстановления вашего приложения. Это дает понимание чем можно пожертвовать при написании приложения. Например если пользователь перезагрузит страницу и у него закроется календарь – что наверное не так важно, это можно отнести в state. Здесь лучше хранить то,что не жать потерять. Например, нам важно количество статей, т.е. если удалились пара статей вам важно об этом знать. Вы хотели бы информацию эту информацию – ее место в store. Как раз мы подошли к вопросу о фильтрах и их создании. Давайте сделаем reducer который будет хранить значение фильтров. Сейчас мы все храним в компоненте в ArticleList , а мы их вынесем в отдельный компонент/контейнер.

Создадим Filters.js в папке containers.  И сюда мы вынесем все что нам необходимо для фильтров. Таким образов в ArticleList останется:

Где мы добавим import Filters и отобразим их в return.
Все остальное у нас переместилось в компонент Filters.

Добавляем  { conncect } в import и в export default

Проверяем, все должно работать, хотя ничего особенного мы не сделали пока. Что действительно важно так это то что нам не нужен state. Мы должны сделать так чтобы все эти элементы такие как selectedArticles, from хранились в reducer . Создадим в папке reducer файл filters.js :

В reducer/index.js подключим :

И сразу же научим их меняться, для этого зайдем в constants.js и добавим:

Также не забудем создать action creater – filters.js:

Теперь доделаем наш reducer таким образом:

В return внизу чтобы состояние не мутировали добавим следующую запись. Напомню, что в React мы не меняем прошлое состояние а всегда возвращаем новое. Если Redux видит что ничего не поменялось он просто не вызовет callbacks которые подписаны на ваши изменения.Теперь в containers/filters.js делаем импорт нашего AC:

Также добавим добавим его в connect, а также из state будем брать не только статьи но и саами фильтры:

Теперь все, что мы читали из state, нам нужно читать из filters:

Теперь все данные ходят через Redux store и  полностью хранятся там.
Поговорим немного о фильтрах. Теперь в Articles.js нам доступны filters. Сейчас в store хранятся как статьи так и  фильтры. Мы хотим видеть уже отфильтрованные статьи. Лучшее место где это можно делать так это в connect. Саму функцию фильтрации можно выносить в utils к примеру, можно писать прямо в Articles, это уже на ваш вкус. Напишем пока здесь, хотя в реальной жизни лучше вынести это в отдельный файл:

С самого начала буде хранить пустой массив в reducer/filters.js:

Таким образом  мы отдельно храним данные про статьи, отдельно информацию про фильтры. Когда нам нужно мы берем информацию из обеих источников, из фильтров и статей, фильтруем . А в Articles у нас благодаря connect появляются наши данные, готовые, отфильтрованные. Данные в store попадают только через reducer’ы. В store храниться какое-то состояние, когда происходит dispatch какого-то action с помощью storeDispatch, с помощью action creator который обернут у нас при помощи connect. Когда мы делаем dispatch action, он попадает в reducers, они берут старое состояние store и action который мы dispatch (например изменение фильтра), мы берем старые фильтры которые у нас  были и action, из него достаем change и делаем merge старых фильтров  и новых. Только все это делаем в новый объект, чтобы у нас не мутировали старые. После того как reducer закончил свою работу store берет новое состояние, сохраняет его и вызывает все callbacks которые были подписаны с помощью store.subscribe и обновляет соответствующие компоненты.

Код домашнего задания находиться здесь.

react-js

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