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

строке
"parser": "flow", // парсер - flow (пока не важно)
"semi": false // точка с запятой - нет
}

Вот и все настройки. Настройка - parser, вам пока не должна мешать, а что такое
trailingComma - пример ниже:
const data = {
name: 'Max',
city: 'Moscow, // просто render
class App extends Component {
render() {
return (


Welcome to React


To get started, edit src/App.js and save to reload.


)
}
}
export default App

Выполните команду в терминале (находясь в директории с проектом):
node_modules/.bin/eslint src/

Так как я не люблю глобальные зависимости, я использую локально установленный
eslint (его установил для нас create-react-app). Чтобы упростить вызов в терминале,
можно добавить в секцию scripts в package.json новую команду:
package.json

16

ESLint и Prettier

...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"precommit": "lint-staged",
"eslint": "node_modules/.bin/eslint src/"
},
...

Теперь eslint в терминале можно запускать так:

npm run eslint

. После запуска этой

команды, eslint проверит весь src/ на наличие ошибок/предупреждений. Это полезно
сделать в начале внедрения "жесткого пре-коммита" и лично исправить все ошибки,
чтобы команда научилась на хорошем примере.
Вернемся к настройке. Изменим lint-stage скрипт в package.json на:
"lint-staged": {
"*.{js, jsx}": [
"node_modules/.bin/eslint --max-warnings=0",
"prettier --write",
"git add"
]
}

Теперь в момент пре-коммита будет запускаться lint-staged проверка в которой eslint и
prettier обработают все файлы, готовящиеся к коммиту.
Что интересно, я настроил еслинт агрессивно (опция

--max-warnings=0

), то есть, даже

любое предупреждение прервет коммит.
Проверим:

17

ESLint и Prettier

На скрине видно "вредный совет". Да, если добавить
commit

--no-verify

к команде

git

, то проверок не будет. Но за это сразу бейте по рукам.

Итого: Настроили ESLint, prettier и pre-commit hook. Очень сильно облегчили жизнь
себе и коллегам, кто болеет за единый стиль и чистый код.
Исходный код (без ошибок).

18

ESLint и Prettier

19

Создание

Создание
Я предлагаю по шагам создать одностраничное приложение, с минимумом функций,
которое после логина в VK и подтверждения прав доступа к фото, будет выдавать топ
ваших "залайканных" фото в порядке убывания. Схематично, приложение можно
представить следующим образом:

Прежде чем описывать структуру, давайте в общих чертах взглянем на Redux.
Redux - приложение это:
состояние (store) приложения в одном месте;
однонаправленный поток данных: случился action -> редьюсер по команде "фас"
отработал и вернул новое состояние -> компонент(ы) обновились;
Redux вдохновлен Flux методологией и языком программирования Elm
Под капотом, Redux использует старую фичу реакта - context, которая обрела вторую
жизнь в версии реакта 16.3 - "New context API".
Есть старый context, который использует Redux, и есть новое Context API, не путайте.

Файлы и папки:
20

Создание

Изначально наше приложение в файловом менеджере должно выглядеть так
(создайте недостающие директории в src):
+-- src
|

+-- actions

|

+-- components

|

+-- containers

|

+-- reducers

|

+-- utils

+-- файлы-от-create-react-app
+-- ...

Для обучения мы будем использовать очень распространенный подход организации
файлов: деление на контейнеры и компоненты + экшены и редьюсеры в отдельных
директориях.
Есть и другие подходы, мне нравится композиция по фичам/страницам (EN).

21

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

Основы Redux (теория)
Курс рассчитан на создание приложения по шагам, а это значит максимум практики и
минимум теории. Этот самый минимум, перед вами.
Давайте еще раз взглянем на схему нашего приложения:

В шапке слева заголовок и три кнопки выбора года. Ниже - фото соответствующего
года, отсортированное по количеству лайков.
В шапке справа - ссылка войти/выйти.
Представим, как должны выглядеть данные для такой страницы:
app: {
page: {
year: 2016,
photos: [photo, photo, photo...]
},
user: {
name: 'Имя',
...
}
}

22

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

Поздравляю вас, мы только что описали как должно выглядеть состояние (state)
нашего приложения.
За содержание всего состояния нашего приложения, отвечает объект Store. Как уже не
раз упоминалось - это обычный объект

{}

. Важно, что в отличии от Flux, в Redux

только один объект Store.
Не хочется оставлять вас надолго без практики, поэтому процесс создания store и
немного подробностей про --">