Диспетчер и экшены Redux

В предыдущем эпизоде мы придумали удобное хранилище состояния. А в этом сделаем работу с ним более удобнее, доработав экшены. Отделим декларацию действия от его реализации, сделав код компонентным и тестируемым. И после этого рассмотрим и подключим библиотеку Redux:

  • 00:01:11 - Проблемы невыделенного кода
  • 00:02:28 - Отписка слушателя
  • 00:04:03 - Постановка задачи
  • 00:06:00 - Вынесение конвертеров состояния
  • 00:07:56 - Обобщение сигнатур
  • 00:09:45 - Создание функции reducer
  • 00:11:37 - Написание reucer-а
  • 00:13:35 - Группировка action и params
  • 00:15:24 - Константы для имён действий
  • 00:16:47 - Добавление метода dispatch
  • 00:19:20 - Инъекция зависимости
  • 00:20:54 - Перенос инициализации состояния
  • 00:22:19 - Использование action creators
  • 00:24:18 - Комбинирование редьюсеров
  • 00:27:22 - Разбиение состояния
  • 00:28:58 - Универсальный combineReducers
  • 00:30:11 - Обзор результата
  • 00:31:35 - Подключение Redux

А в следующем эпизоде добавим интерактив и разберём настоящий MVC.

Скрытый контент
Комментарии (16)
Кропотов Александр

Выдохнул ) Да, это не 6 часов )

Ответить
Evgeniy

Скорее бы опять к бэкэнду вернулись - столько интересного в очереди стоит.

Ответить
Дмитрий Ориховский

Да. Бэк это сила. 💪

Ответить
elmut

уже не дождался сам изучил Bus

Ответить
Arunas

Спасибо :)

Ответить
Evgeniy

Ух ты - deworker перешел на React)))

Ответить
Дмитрий Елисеев

Да, за пару недель постепенно перевели c Nuxt на Next.

Ответить
fedot

Спасибо Дмитрий, отличный урок, но раз пошла такая пьянка, может выскажите мнение о MOBx ? Случаи когда предыдущее состояние прямо вот нужно и необходимо, можно по пальцам пересчитать, а лишняя писанина совсем не радует, особенно если делаешь для заказчика, а не для себя, а MOBx сильно сокращает код и делает его более понятным.

Ответить
Дмитрий Елисеев

Да, MOBx выигрывает в размере кода, взамен добавляя чуть больше магии. Но суть от этого не меняется.

Ответить
fedot

Ясно, спасибо.

Ответить
Aёct'ann

Супер! Спасибо за четкое изложение)

Ответить
Александр

Дмитрий, а сделайте урок хотя бы теоретический по типу философии, о server side rendering, что это и зачем. Спасибо.

Ответить
Дмитрий Елисеев

В примере с кодом в HTML-странице показать не получится, так как нужно будет всё запускать в NodeJS-сервере.

А вообще SSR нужен для того, чтобы при первом запросе с сервера возвращалась не пустая страница:

<div id="root"></div>

как у нас наполняемая уже потом в браузере по ReactDOM.render(<App />, root), а как у классических сайтов сразу бы возвращалась страница со всем HTML-контентом:

<div id="root">
  <div class="app">
    ...
  </div>
</div>

уже сгенерированным на сервере через ReactDOMServer.renderToString(<App />).

И уже на неё в браузере через ReactDOM.hydrate(<App />, root) подключался бы JavaScript.

В итоге имеем и индексацию поисковыми системами как у классического сайта, и JS-интерактив.

Ответить
Александр

Спасибо за ответ.

Ответить
rodigy

Зачем константы. Можно сразу же передавать ф-ции по названию или из объекта по ключу и избежать огромного switch - case

Ответить
Дмитрий Елисеев

Да, можно. Но мы изначально ориентировались на пример Redux.

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий