React JS #22 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part I)

#YauhenK #webDev #React #Redux #ReactRouter
Всех приветствую в курсе «React JS».
В данном видео-курсе мы с вами рассмотрим базовые понятия библиотеки React JS. Научимся создавать свои компоненты приложения. Разберёмся, как подключается и как работает React Router и с его помощью напишем простое одностраничное приложение. А так же рассмотрим такой подход контроля данных в приложении, как Redux.
Дополнительные темы, которые мы рассмотрим:
- Валидация пропсов с помощью библиотеки PropTypes
- Работа с реальным API
- Создание роутинга одностраничного приложения с помощью React Router
- Работа с менеджером состояний Redux
✒ Репозиторий курса:
✔ GitHub: github.com/Yau...
✒ Полезные курсы на канале:
✔ ES6: • ES6
✒ Используемые ресурсы и инструменты:
✔ Atom (Редактор кода): atom.io/
✔ Create React App (рабочее окружение): github.com/fac...
✔ React Developer Tools (расширение для браузера): chrome.google....
✔ Redux Devtools (расширение для браузера): chrome.google....
✔ Redux Devtools (репозиторий): github.com/zal...
✔ Fake online REST API (моковый API): jsonplaceholde...
✔ Hacker News (ресурс): hn.algolia.com...
✔ Hacker News (описание API): hn.algolia.com...
✔ Redux-LocalStorage-Simple (репозиторий): www.npmjs.com/...
✒ Полезные ссылки:
✔ React (документация): reactjs.org/do...
✔ Redux (документация): redux.js.org/
✔ React анимации (документация): reactcommunity...
✔ Redux (документация): redux.js.org/
✔ React lifecycle methods +16.3 (ресурс со ссылками): projects.wojtek...
✔ React lifecycle methods less 16.3 (картинка): webjustify.com...
✔ React Transition Group (документация): reactcommunity...
✔ React Router (репозиторий): github.com/Rea...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...

[@user-np2tk1et2l]

Здравствуйте! Я так и не понял, как редьюсер "схватывает" экшн, то есть у редьюсера экшн вторым параметром стоит, но как и где экшн передается в редьюсер не понятно. Просто вызов addTask при добавлении задачи я только вижу

[@ccc3948]

Шикарно, а я люблю TODO приложение делать - для теста и обучения именно то, что нужно. Кто писал что сложно - так ведь реальньіе проектьі по сложнее будут О_о

[@YauhenKavalchuk]

Спасибо за поддержку! Полностью с вами соглашусь TODO - это идеальное приложения для того что бы попробовать все типы операция я имею ввиду CRUD.

[@user-bh6mc8pd8g]

вставлю 5 копеек своих, обычно в action creator все что не поле type то записывают в payload (чтобы не загромождать) , в нашем случае : type: "ADD_TASK" payload: { id, text, isCompleted }

[@YauhenKavalchuk]

Да, есть такая практика

[@kpodh]

Доброго времени суток! До вашего курса встречал работу с action с использованием dispatch: const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) ваша реализация: export default connect(state => ({ tasks: state.tasks, }), { addTast, removeTask, completeTask })(ToDo); addTast = (id, text, isCompleted) => ({ type: ADD_TASK, id, text, isCompleted }); У вас отсутсвует dispatch. Проясните, пожалуйста, эту ситуацию.

[@YauhenKavalchuk]

mapStateToProps - функция перемапливания стейта впропсы компонента (возврат объекта со свойствами). mapDispatchToProps - перемапливание диспетчеров в пропсы (возврат объекта с методами). Обе эти функции можно опустить если использовать синтаксис, который представлен в уроках. Работает это всё абсолютно одинаково просто другой синтаксис. Вы - оборачиваете это вручную. А у меня экшены автоматически оборачиваются в connect. Вот статья где описаны эти способы: blog.benestudio.co/5-ways-to-connect-redux-actions-3f56af4009c8

[@kpodh]

Yauhen Kavalchuk спасибо

[@YauhenKavalchuk]

Пожалуйста)

[@user-mw9fi7po2u]

@@YauhenKavalchuk addTast = (id, text, isCompleted) => ({ я так понимаю здесь синтаксическая ошибка и Вы имели в виду addTask. Спасибо Вам за ваши уроки, на данный момент это лучшее что я встречал на ютубе

[@user-bh6mc8pd8g]

Подскажите пожалуйста мне новвичку, правильно ли я копирую мой стэйт, решил все таки запихнуть id, text & isCompleted - внутрь payload, codepen.io/PIMJl9HIH/pen/LwVaWN?editors=0010 все ли красиво сделал или есть минусы, буду очень признателен.

[@YauhenKavalchuk]

28 строка. Вместо Object.assign лучше воспользуйся деструктуризацией. Это более верный и элегантный подход

[@user-bh6mc8pd8g]

@@YauhenKavalchuk спасибо , учитель)

[@AlexRudOy4ik]

каким образом экшн перехватывается редьюсером? Экшн по идее должен просто возвращать объект, какая конкретно строчка (или комбинация их) передаёт данный объект в свитч/кейс редьюсера?

[@YauhenKavalchuk]

Обёртка - connect

[@3bbiani]

Евгений, привет! Подскажи, а чем плох вариант вместо store использовать state корневого компонента (скажем, того же App) и передавать его во все компоненты, которые хотим наделить полномочиями изменения? В чем будет отличие в таком случае от Редакса?

[@YauhenKavalchuk]

Есть такое понятие props drilling. Прочитай, сразу поймёшь)

[@3bbiani]

@@YauhenKavalchuk Это я понимаю, но по итогу мы ведь и так этим занимаемся, когда передаем данные из контейнера в компоненты, разве нет? Т.е. сейчас для меня это выглядит как та же функциональность, только по-другому названная. В Редаксе помимо этого приходится возиться с функцией connect, прописывать отдельно actions, привязывать actions к нашим методам, привязывать actions к редьюсеру, который в свою очередь необходимо связывать с другими редьюсерами. Пока не вижу выгоду от этого использования, что я упустил из виду?

[@YauhenKavalchuk]

Когда будет большое приложение. Состоящее, хотя бы из 10 подуровней вложенных компонентов, то это очень хорошо почувствуется. В маленьких это не сильно видно

[@3bbiani]

@@YauhenKavalchuk Я правильно понимаю, что в таком случае (10 подуровней) обычно используется метод множественных контейнеров, а него одного? В противном случае получаем тоже props drilling?

[@YauhenKavalchuk]

Да

[@denis_minimal]

Зачем в компоненте Todo передавать экшн addTask в connect и потом извлекать его из пропсов, если его можно напрямую использовать в компоненте? В чем разница между этими двумя способами? Спасибо

[@YauhenKavalchuk]

Потому что компоненты не должны содержать бизнес-логику. Они предназначены только для рендеринга данных

[@denis_minimal]

@@YauhenKavalchuk Вы меня немного не поняли, но я сам ответил на свой вопрос. Если экшн напрямую использовать в компоненте, то придется писать так, например, onClick={dispatch(addTask())}, а если экшн передать в connect, то запись сократится до onClick={addTask}

[@bekzatmakhanbet5346]

Легче использовать mobx, если вам не нужен тотальный контроль над процессом обновление state

[@YauhenKavalchuk]

Ну да, как вариант. Тем более что курс по MobX так же есть на канале

[@user-lw3lc8yv4d]

Подскажите что не так: заимпортил action, в конце добавил : export default connect (null, {addToCart})(Product) - т.е. state не стал привязывать, он в компоненте не нужен; и в компоненте: render () { const { addToCart} = this.props; return ( Add to Cart ) В итоге в React-инспекторе в пропсах addToCart нет. И в redux-инспекторе тоже ничего не происходит.

[@YauhenKavalchuk]

Попробуйте: export default connect ({}, {addToCart})(Product)); И не забудьте сымпортировать экшен addToCard: import { addToCard } from 'actions';

[@user-lw3lc8yv4d]

@@YauhenKavalchuk Не получилось. Попробовал в др. компонент, в который я store данные пробрасывал. У него даже без добавления addToCart, в пропсах был dispatch. Я сделал так и addToCart пробросился. Получается без mapStateToProps не будет работать mapDispatchToProps? Хотя в документации написано, что можно. export default connect (state => ({ productsInCart: state.products, }), {addToCart})(Cart); Да, импорт action'a так и был сделан.

[@user-lw3lc8yv4d]

Нашел свою ошибку. У меня был объявлен помимо export default connect (...) ещё и export default class Product extends Component {...}

[@YauhenKavalchuk]

Понятно, ну хорошо что нашли проблему

[@DirtyKalach]

Добрый день, у меня иконки не отображаются ((

[@YauhenKavalchuk]

Не видя вашего кода, помочь не могу. Сверяйте с кодом из репозитория, проверьте подключение font-awesome

[@yevhentarik4551]

handleChangeInput = ({ target: { value } }) => { this.setState({ taskText: value }); }; addTask = ({ key }) => { const { taskText } = this.state; if (taskText.length > 3 && key === "Enter") { const { addTask } = this.props; addTask(new Date().getTime(), taskText, false); this.state({ taskText: "" }); } }; Объясните плиз ({ target: { value } }) и ({ key }) записи

[@YauhenKavalchuk]

Это деструктуризация. В плейлисте по ES6 есть подробное объяснение

[@jenyaspace]

Не пойму как состояние из компонента прокидывать в Redux

[@YauhenKavalchuk]

С помощью экшена

[@jenyaspace]

@@YauhenKavalchuk а может ли существовать экшен без редюсера?

[@YauhenKavalchuk]

А смысл его тогда заводить?

[@YuriiKratser]

Могу ли я принять данную организацию проекта за эталонную? Вы видели todo на сайте react-redux?

[@YauhenKavalchuk]

Смотрел это todo приложение очень давно, когда только начинал учить. На счёт структуры - есть несколько вариантов организации структуры. Лично я всегда использую именно такую структуру, как и описал. Она хорошо зарекомендовала себя на нескольких проектах.

[@nevalek6721]

почему репозиторий пустой?

[@YauhenKavalchuk]

Там есть ветки для каждого урока

[@iGotton]

+

[@sharomet]

Зачем столько геморроя, мне кажется что vue и vuex более адекватные чем react.

[@YauhenKavalchuk]

Это субъективное мнение