Пятая часть еженедельной серии, в которой рассказывается о моем опыте в Lambda School.

Я хочу извиниться за то, что так поздно написал этот отчет о моей неделе. В Лямбда-школе и за ее пределами происходило много интересного.

Давайте углубимся в то, что моя когорта узнала на этой неделе. Звездой этой недели стал Redux. Помните, на неделе 4 мы узнали о компонентах React и о том, как компоненты класса обрабатывают состояние. Если каждый компонент отслеживает применимые изменения состояния, это может сойти с ума! Хотя это выполнимо, чем больше ваше веб-приложение, тем больше состояний компонентов вам нужно управлять.

Что такое Redux?

Самое простое определение Redux - это то, что он поддерживает состояние всего приложения. Хотя Redux тесно связан с React, его можно использовать с любой интерфейсной структурой. Как сказано в документации, Redux построен на трех принципах.

3 основных принципа Redux

  1. Единый источник истины: состояние всего вашего приложения хранится в дереве объектов в едином хранилище.
  2. Состояние доступно только для чтения: единственный способ изменить состояние - вызвать действие, объект, описывающий, что произошло.
  3. Изменения вносятся с помощью чистых функций: чтобы указать, как дерево состояний преобразуется действиями, вы пишете чистые редукторы.

Изучите Redux:

Redux позволяет безболезненно отслеживать состояние различных компонентов. Если вы только начинаете знакомиться с Redux, вы не ошибетесь, ознакомившись со следующими ресурсами:

  1. Redux Docs: официальная документация Redux.
  2. Начало работы с Redux: отличный видеоурок, созданный автором Redux.
  3. Создание приложений React с идиоматическим Redux: продолжение видео, созданное автором Redux Дэном Абрамовым.
  4. Redux · Введение: отличный пост, написанный Алексом Бачуком.
  5. Объяснение React-redux connect: отличный пост, объясняющий React-Redux от Soham Kamani.

Что вы узнали на этой неделе?

На этой неделе был почти полностью посвящен Redux и тому, как интегрировать его с React. Вот разбивка нашей недели:

Redux в том числе:

  1. React-Redux
  2. штат
  3. редукторы
  4. контейнеры / интеллектуальные компоненты
  5. соединять
  6. действия
  7. создатели действий
  8. localStorage
  9. mapStateToProps
  10. mapDispatchToProps
  11. функциональный дизайн приложения

Вопросы и Ответы

На этой неделе основные вопросы, связанные с повседневной жизнью в Lambda School.

Какие задания вы выполняете в Lambda?

На этой неделе мы повторно рассмотрели тип проекта, с которым многие из вас знакомы:

Приложение Todo: к нашему приложению предъявлялись следующие требования:

  • Должен включать Redux
  • В вашем приложении должно быть поле ввода, кнопка отправки и список элементов, представляющий ваш список дел.
  • В дереве состояний вашего приложения должно быть одно свойство, называемое todos.

ДОПОЛНИТЕЛЬНЫЙ КРЕДИТ:

  • Реализовать возможность удаления элементов списка дел. Вы можете создать кнопку рядом с каждым элементом списка задач, и когда она будет нажата, она вызовет создателя действия, который отправит действие, которое удаляет указанный элемент списка задач из массива задач.
  • Используйте localStorage, чтобы данные сохранялись.

Обычно приложения Todo - это второе, чем занимается разработчик после Hello World. У меня отношения любви / ненависти к приложениям Todo. Они быстро надоедают, но позволяют создать что-то простое, внедряя фреймворк или библиотеку, которую вы изучаете.

Надеюсь, вам понравился мой пост, и я хочу поблагодарить вас за то, что поделились моим путешествием. Далее я перейду на 6-ю неделю и изучу HTTP, маршрутизацию SPA и NODE / Express! Не могу дождаться, чтобы рассказать вам все об этом!

Если у вас есть какие-либо вопросы о Lambda School, моем опыте там или любой из тем, которые я освещаю, пожалуйста, свяжитесь со мной. Я люблю помогать.