Исходники лежат тут:
Получить профессию Frontend разработчика -
Подробнее узнать об обучении в Result School -
Бесплатный курс HTML & CSS -
Сделать 5 проектов на JavaScript -
Я в соц сетях: Telegram:
VK:
https://vk.com/vladilen.minin Instagram: / vladilen.minin Мои паблики по JavaScript: Telegram:
VK:
https://vk.com/result.school Instagram: / result.scho. . JavaScript cообщества: Discord: / discord Telegram:
Roadmap по каналу:
React Redux. В одном видео вы увидите использование React + Redux + Redux Saga на практике. В ролике увидите создание приложения с нуля и работу с формами, загрузкой данных с сервера, работу с DevTools и плотную работу с Redux Store. На выходе получите алгоритм приложения, описывающий поведение большинства Frontend приложений Дополнительные ролики для комфортного прохождения курса: Курс по Redux: • Redux Полный Курс Полный курс ES6: • JavaScript ES6 - Полный курс за 2 часа Реакт Полный курс: • React JS Быстрый Курс Генераторы: • Урок 11. JavaScript. Генераторы. Symb... Таймкоды 02:53 - npx create-react-app . 03:40 - подключаем bootstrap 07:05 - Что будет в проекте 08:00 - начальная разметка 09:00 - создаём компоненты 09:50 - компонент на классе 12:23 - компоненты на функциях 14:37 - передаём параметр в компонент-функцию 17:43 - проверка на передачу пустого массива в компонент 19:35 - event.preventDefault в форме 21:30 - добаляем динамики в форму 22:08 - универсальный обработчик для всех input в форме 23:25 - setState с ф-цией работающая с предыдущим состоянием 23:55 - динамически определяем по какому ключу в state необходиму поменять значение 24:22 - используем предыдущее состояние state 25:25 - event.persist() 26:35 - формируем новый объект поста 27:35 - очищаем поле input после submit 28:05 - взаимодействие между компонентами формы и постов 28:37 - в чем различия context и redux? context и хук useReducer разве не убивают Redux? 30:18 - установка redux 31:30 - подключение redux к проекту 31:50 - создаём store (createStore()) 32:10 - rootReducer 32:50 - combineReducers() 33:17 - создание reducer 34:16 - initialState 35:17 - Provider (связываем react и redux) 37:00 - redux devtools extension 37:57 - compose() 38:57 - функционал добавления синхронного поста 39:48 - функция высокого порядка - connect() и умный компонент-функция 41:25 - хелпер ф-ции mapStateToProps 42:40 - преобразовываем необходимые поля state в нужные props для компонента 43:56 - как изменить состояние постов в state 44:18 - создаем логику изменения состояния в reducer 44:26 - types для actions 45:12 - дописываем функционал в reducer 45:35 - способы не мутирующие state: #1: concat(), #2: ...spread (51:25 - исправили ошибку) 47:25 - action creator 48:05 - dispatch action в компоненте 48:13 - connect() и компонент-класс 49:10 - хелпер mapDispatchToProps 54:08 - асинхронные посты 54:10 - redux-thunk (доп. пакет для работы с асинхронностью) является middleware 55:15 - applyMiddleware 56:31 - работа со множеством reducer'ов 57:18 - Pure Functions (Чистые функции) 58:00 - action с асинхронным кодом 59:50 - связь функционального компонента со стором через хуки 1:00:20 - useDispatch() 1:01:23 - useSelector() 1:02:48 - индикация лоадинга, reducer для разных нужд приложения 1:04:25 - добавляем лоадинг в компонет 1:05:40 - отдельный компонент лоадинг 1:06:23 - action для отображения/скрытия лоадера 1:07:30 - имитация задержки ответа сервера (setTimeout) 1:08:18 - создаём сообщения с warning 1:09:10 - состояние для warning в state 1:09:23 - types (типы) для warning 1:09:50 - обрабатываем types в reducer 1:09:28 - action для warning 1:11:06 - когда нужно вызывать action для warning 1:11:20 - присоединяем action к компоненту 1:12:00 - отдельный "глупый" компонент для warning 1:13:13 - присоединяем store для получения данных из него 1:13:58 - условие показывать или нет warning 1:14:25 - убираем warning через некоторое время 1:15:38 - обработка ошибок с сервера try...catch 1:16:55 - middleware - что это и как их создавать 1:17:14 - фильтруем слова при вводе заголовка поста 1:21:55 - saga (side effects) 1:23:40 - внедряем saga в проект 1:24:58 - npm install redux-saga 1:25:16 - redux/sagas.js 1:25:38 - импорт createSagaMiddleWare в index.js 1:26:16 - привязываем watcher к saga - saga.run() 1:26:40 - делаем ф-цию генератором 1:27:15 - takeEvery() (эффект из saga) 1:28:12 - sagaWorker() 1:28:50 - put() (эффект из saga) 1:29:14 - async ф-ция с fetch 1:29:52 - call() (эффект из saga) 1:31:26 - обработка ошибок в saga React, Redux + Saga. Практический Курс #react #redux #saga
