М. Пацианский - Основы Redux

Содержание
Вступление
От автора
Подготовка

1.1
1.1.1
1.2

create-react-app

1.2.1

ESLint и Prettier

1.2.2

Создание

1.3

Основы Redux (теория)

1.3.1

Точка входа

1.3.2

Редьюсеры и connect

1.3.3

Комбинирование редьюсеров

1.3.4

Контейнеры и компоненты

1.3.5

Создание actions

1.3.6

Константы

1.3.7

Наводим порядок

1.3.8

Middleware (усилители)

1.3.9

Асинхронные actions

1.3.10

Взаимодействуем с VK

1.3.11

Рефакторинг

1.3.12

Оптимизация перерисовок

1.3.12.1

Доработки

1.3.12.2

Что дальше?

1.4

Спасибо

1.5

1

Вступление

React Redux [RU tutorial] (2-е издание)
Версия от 2018 года включает в себя React
16.4.3

) и Redux

^16.4.1

(без проблем апгрейдится до

^4.0.0

Так же в 2018м году активность в онлайне выросла в разы, подробнее в разделе "От
автора".

В данном учебном курсе вы найдете 2 раздела:
1. Подготовка (сильно похудела во втором издании, так как появился CRA)
2. Теория redux и создание веб-приложения по шагам
Курс предполагает, что читатель уже знаком с React. Если вы не знакомы, рекомендую
для начала ознакомиться с курсом React.js для начинающих.
В результате прохождения курса, вы научитесь:
Основам создания SPA-приложения на React;
Грамотно готовить Redux-приложение (однонаправленный поток данных);
Выполнять асинхронные запросы (прелоадер, обработка ошибок) с помощью
стандартного redux-thunk;
Взаимодействовать со сторонними API (на примере VK API);
Работать с документацией (по-желанию);
Оптимизировать перерисовки компонентов;
Результатом изучения будет приложение, которое выведет ваши фото из VK
отсортированные по лайкам с фильтром по году.

2

Вступление

Поддержать проект
Вы можете поддержать проект, мне будет очень приятно.
Если у вас не получается поддержать проект материально, вы можете оставить отзыв
в группе vk.

3

От автора

Обо мне

Меня зовут Максим Пацианский, я Frontend-разработчик, стартанул в этой теме с
Joomla! сайтов в 2008 году.
Занимаюсь консультированием по React более 2х лет, с момента выхода прошлых
учебников.
Подробнее о моем опыте консультирования я писал на хабре.

Напутствие
Пожалуйста, выполняйте код по ходу книги. Ломайте его, "консольте", интересуйтесь.

Полезные ссылки
Мои уроки/вебинары/соц.сети:
Полноценный учебник "Основы React"
Расписание стримов и вебинаров (на сайте есть текстовые версии вебинаров)
Youtube канал c записями вебинаров и стримов
Группа vkontakte
Канал в telegram
Twitter
Facebook
React.js (EN) - офф.сайт, содержит примеры для изучения

4

От автора

Redux (EN) - документация по Redux (так же есть примеры)

Консультации и платные услуги
С 2016 года, я с удовольствием занимаюсь консультированием 1 на 1, поиском
проблем в коде, помощью в подготовке к собеседованию и т.д. Хороший багаж опыта,
которым я готов поделиться понятным языком.
Актуальный прайс

5

Подготовка

Подготовка
Данная глава является обучающей для людей, которые не в курсе, или хотят освежить
и пополнить свою базу знаний, по следующим пунктам:
Установка create-react-app (CRA) [копия разделов из учебника по основам React]
настройка VS Code для удобной работы
настройка Prettier
настройка ESLint
Результатом подготовки, будет следующий код.
Если вам понятен код данного раздела, предлагаю сразу переходить к части
"Создание".
Для всех остальных, я предлагаю за несколько простых шагов настроить удобное
рабочее окружение.

6

create-react-app

Установка и запуск create-react-app
npx create-react-app my-app
cd my-app
npm start

Если вы не знакомы с данными командами, значит вам нужно поставить себе node.js и
ввести их в терминале после.

После запуска мы получим следующую картину в браузере:

И следующую файловую структуру:
+-- node_modules (здесь расположены пакеты для работы приложения)
+-- public (здесь расположены публичные файлы, такие как index.html и favicon)
+-- src (здесь живет компонент App)
+-- .gitignore (файл для гита)
+-- package.json (файл с зависимостями проекта)
+-- README.md (описание проекта)
+-- yarn.lock (может быть, а может и не быть - тоже относится к теме зависимостей прое
кта)

7

create-react-app

CRA при каждом изменении в файлах внутри директории src - перезагружает страницу
в браузере.

Про import/export задерживаться не будем, так как думаю вы это уже знаете. Если что,
есть глава "Приборка и импорты" в учебнике по основам --">