В этом уроке мы кратко рассмотрим Redux и расскажем, как настроить демонстрационный проект. Видеоверсия этого урока доступна здесь:
Но если вы любите читать, то давайте приступим к делу.
Давайте начнем с диаграммы, которая показывает, как организован Redux.
Состояние — это место, где хранятся все ваши данные. Его также можно назвать магазином, поэтому, если вы это слышите, просто знайте, что это то же самое, что и государство. Действительно, название «магазин» вводит в заблуждение, потому что на самом деле это набор мини-магазинов, называемых редьюсерами. Таким образом, у вас обычно будет набор редукторов, которые объединяются для создания вашего магазина. Редукторы — это место, где организованы все ваши данные. Они сортируют и сегментируют ваши данные по разным группам и коллекциям и в значительной степени выполняют всю работу по сортировке данных так, как вы хотите.
Каждый раз, когда происходит изменение данных, происходит действие. Действие посылает сигнал редьюсеру, который, в свою очередь, обновляет данные в том виде, в котором они были только что изменены. Так, например, если у вас есть приложение для обмена фотографиями, в любое время, когда кто-то изменит подпись к своей фотографии, будет вызвано действие, которое сообщит редьюсеру обновить данные до новой подписи для фотографии.
Пока мы рассмотрели хранилище, редукторы и действия, так что давайте подведем итоги очень быстро. Всякий раз, когда запрашивается изменение данных, выполняется действие. Затем действие вызывает редукторы для внесения изменений в данные, которые затем обновляют все хранилище. Теперь, как только хранилище будет обновлено новыми данными от редюсеров, можно обновить фактический контент на странице. Все зеленые кружки на диаграмме являются компонентами. Состояние распространяет изменения в компонентах каждый раз, когда редукторы обновляются новыми данными. Однако напрямую к хранилищу подключена только страница, тогда как остальные подкомпоненты, также называемые тупыми компонентами, получают новые данные прямо со страницы. Вы можете думать о странице как о посреднике между контентом и магазином.
То, что я описал вам выше, в значительной степени является общей идеей React. Часть Redux появляется там, где хранилище подключено к странице, а затем страница определяет, о каких свойствах хранилища ей нужно знать. Каждый раз, когда происходит изменение данных, хранилище оповещает страницу, которая распространяет изменения на содержимое страницы. Это стандартная архитектура Redact Redux. Единственное, что я хотел бы изменить в этой диаграмме, это то, что обычно это не один контейнер (страница), а ряд контейнеров, подключенных к хранилищу. Пока мы продолжим обучение, следите за диаграммой. Таким образом, когда мы работаем над кодом, вы можете понять, как работает структура React Redux на реальном примере.
Начнем программировать!
Теперь, когда вы знаете общую идею React Redux, давайте начнем работать над реальным проектом, используя его. Первое, что нам нужно сделать, это убедиться, что у вас есть правильные инструменты. Откройте свой терминал и убедитесь, что у вас установлен Node. Вы можете сделать это, используя команду в своем терминале:
$ node -v
Вы должны использовать версию 6 или выше. Если нет, просто зайдите на веб-сайт Node и загрузите последнюю версию. Далее, давайте убедимся, что у вас есть Webpack. Если он у вас есть, отлично. Если нет или вы не уверены, просто запустите эту команду в терминале:
$ sudo npm i -g webpack
затем ваш пароль. Это должно установить его. Как и в случае с Webpack, мы собираемся установить Gulp с помощью этой команды:
$ sudo npm i -g gulp
и последнее, но не менее важное: убедитесь, что у вас есть Turbo-CLI, используя эту команду в терминале:
$ sudo npm i -g turbo-cli
После того, как вы это установили, вы должны быть готовы к работе. Теперь, используя терминал, измените каталог на рабочий стол с помощью этой команды:
$ cd ~/desktop
Далее собираемся сделать проект через командную строку с Турбо. Для этого мы собираемся ввести:
$ turbo new redux-demo
Теперь, когда у нас есть новый проект, измените свой каталог (с этого момента я просто буду говорить cd) в свой проект следующим образом:
$ cd redux-demo
и установите все зависимости Node, используя:
npm install
Это должно занять около минуты. Как только это будет сделано, мы готовы к рок-н-роллу.
Вы должны увидеть на своем рабочем столе, что теперь у вас есть папка проекта с именем «redux-demo». В нем должны быть все предустановленные файлы Turbo; однако там пока нет React, поэтому нам придется создавать его с нуля. Прежде чем мы начнем сборку, убедитесь, что все, что мы только что сделали, работает правильно, выполнив эту команду в терминале:
$ turbo devserver
а затем проверьте свой http://localhost:3000 в веб-браузере. Если вы видите что-то вроде этого:
вы все сделали правильно до сих пор! Теперь мы хотим установить React и Redux, что мы можем сделать с помощью следующей команды терминала (если вы все еще используете сервер разработки, откройте для этого новое окно терминала):
$ npm i -S react react-redux redux react-dom react-thunk
Нам также нужно установить некоторые транспиляторы, поэтому мы хотим запустить:
$ npm i -D babel-core babel-loader babel-preset-react babel-preset-es2015
в терминале для установки тех. Мы собираемся запускать эти транспиляторы через Webpack, поэтому нам нужно создать конфигурацию Webpack с помощью этой команды в терминале:
$ touch webpack.config.js
и вместо того, чтобы вдаваться в тонкости настройки конфигурации веб-пакета, мы предоставили ее вам здесь. Просто скопируйте и вставьте код оттуда в файл конфигурации.
Мы собираемся создать новый каталог в папке нашего проекта с помощью командной строки. Чтобы создать эту папку, которую мы назовем src, убедитесь, что вы находитесь в папке проекта в терминале, и просто используйте команду:
$ mkdir src
после того, как вы его создали, перейдите в него с помощью команды:
$ cd src
и создайте новый файл с именем index.js с помощью команды:
$ touch index.js
Вы можете открыть файл index.js в своем любимом текстовом редакторе, потому что сейчас мы фактически начнем писать код.
Давайте начнем с импорта React в наш проект и добавления такого компонента:
давайте просто убедимся, что после этого все работает нормально, используя следующие команды терминала:
$ cd .. $ webpack
На самом деле мы забыли установить Webpack в наш проект (я знаю, это моя вина), поэтому давайте сделаем это сейчас, запустив:
$ npm i -S webpack
просто снова запустите Webpack, и в терминале должны появиться следующие строки:
Теперь мы можем открыть наш файл index.html (обратите внимание на окончание .html, а не .js) в папке нашего проекта и сделать его таким:
Итак, теперь, если мы перекомпилируем веб-пакет, запустим devserver и перейдем к localhost:3000, мы должны увидеть, что теперь он работает, если вы еще не знаете, как это сделать, просто введите это в своем терминале:
$ webpack $ turbo devserver
Затем выключите сервер с помощью Control-C и перейдите в папку src в терминале. Помните ту диаграмму, которую я велел вам запомнить? Хорошо. Мы собираемся настроить все каталоги для нашего проекта. Давайте создадим каталог в нашей папке src под названием store, один под названием action, один под названием Constants и, наконец, один под названием Reducers. После того, как вы это сделаете, создайте файлы index.js для всех ваших новых каталогов. Вы можете сделать это все в терминале следующим образом:
$ mkdir store $ mkdir actions $ mkdir constants $ mkdir reducers
и для каждого каталога используйте следующие команды в терминале. Я просто собираюсь сделать это для каталога магазина в качестве примера:
$ cd store $ touch index.js $ cd ..
Если вы откроете свой код, вы увидите все новые папки и файлы, которые вы создали в папке вашего проекта.
Давайте теперь создадим некоторые настоящие компоненты. Создайте новый каталог в папке вашего проекта, как описано выше, например:
$ mkdir components
и cd в него. Внутри компонентов создайте два каталога, один из которых называется контейнерами, а другой — презентацией. Вы, вероятно, уже освоились с созданием этой части каталога, но просто для безопасности это делается так:
$ mkdir containers $ mkdir presentation
cd в каталог контейнеров, чтобы мы могли создать первый компонент следующим образом:
$ touch Todos.js
После того, как вы создали файл, откройте его в текстовом редакторе. Мы собираемся настроить очень простой компонент. Ваш Todos.js должен выглядеть так:
Мы также собираемся обновить наш src/index.js, чтобы мы могли импортировать этот файл Todos, что позволит нам использовать только что созданные компоненты. Ваш новый файл index.js должен выглядеть так:
Чтобы проверить это, вернитесь на корневой уровень, снова запустите Webpack, а затем запустите devserver. Проверьте localhost:3000, чтобы увидеть, работает ли он. В левом верхнем углу должно быть написано «Контейнер Todos».
До сих пор мы не делали ничего специфичного для Redux. Далее мы собираемся настроить состояние в нашем файле Todos.js с массивом элементов списка дел. Наш обновленный Todo.js должен выглядеть так:
Чтобы убедиться, что это работает, просто перезапустите веб-пакет и сервер разработки, и для дальнейшего использования каждый раз, когда мы вносим подобные изменения, делайте это каждый раз, или вы можете открыть новое окно терминала и запустить:
$ webpack -w
Это позволяет вам оставить сервер разработки работающим, так как он отмечает каждое ваше изменение.
Мы собираемся добавить поле ввода в Todo.js, чтобы пользователь мог добавить новый элемент Todo со страницы. Мы также собираемся добавить пару функций, которые добавляют новые элементы в массив, когда мы нажимаем кнопку добавления. Для этого обновите свой Todo.js, чтобы он выглядел так:
Если вы перезагрузите веб-сервер, вы можете проверить, работает ли ваш проект. Просто введите входные данные и посмотрите, добавляется ли новый элемент в массив при нажатии кнопки. Кроме того, ваша страница должна выглядеть так:
Если вы все сделали правильно и все выглядит и работает нормально, то поздравляю! Вам удалось зайти так далеко. Обязательно ознакомьтесь со второй частью руководства, чтобы закончить проект.
