Диспетчер и экшены 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.

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (29)
Кропотов Александр

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

Ответить
Evgeniy

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

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

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

Ответить
elmut

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

Ответить
Arunas

Спасибо :)

Ответить
Evgeniy

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

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

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

Ответить
kashamamina

а Nuxt, Next, зачем они нужны, чисто для SSR? и это сложно реализовать самому поверх Vue/React?

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

Да, это готовые сборки для SSR. Можно и самому сделать, но это сложнее.

Ответить
kashamamina

а этот SSR, его главным преимуществом же является то что пользователю отдаётся сразу отрендеренная страница? то есть это по сути немного быстрее и полезно для SEO, чтобы роботы нормально индексировали эти страницы но актуально ли это сейчас, ведь, вроде, я слышал что сейчас поисковики уже нормально воспринимают spa и все хорошо индексируют тогда есть ли смысл в ssr, или же он полезен не только этим и есть ещё какие-то весомые преимущества?

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

это по сути немного быстрее и полезно для SEO

Да, именно для этого.

я слышал что сейчас поисковики уже нормально воспринимают spa и все хорошо индексируют

Ходят слухи, что индексируют, но не все поисковики и не всегда правильно. И точно не индексируют различные анализаторы сайта.

и есть ещё какие-то весомые преимущества?

То же преимущество производительности при открытия сложных страниц со смартфонов. Готовый HTML отобразить быстрее, чем разряжать аккумулятор и ждать результатов выполнения десятков Ajax-запросов по 3G или плохому LTE.

Ответить
kashamamina

а то тот же next это готовая сборка для SSR на базе React, но он уже является полноценным фреймворком а не библиотекой с множеством не всегда нужного функционала, то есть намного громоздкие той же библиотеки

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

Да, SSR-версии - это уже полноценные фреймворки-сборки с уже настроенным маршрутизатором, куда сразу в папку pages можно добавлять компоненты, которые автоматически будут подхватываться как страницы-маршруты.

Ответить
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.

Ответить
S.Polessky

Не до конца понятна зона отвественности, обязанности Редюсера: он только вносит изменения в State, или ещё может вызывать определенные функции?

Давайте на примере:

На наше кукурзное поле прилетает ворона. Мы отправляем Action: {type: "RAVEN_HERE", id: 25} на Reducer.

Какие права у Reducer? Варианты:

а) Reducer может запись в State данные о новой вороне, и(!) активировать функцию: shootInRaven().

б) Reducer может ТОЛЬКО записать в State данные о новой вороне. Чтобы вызвать shootInRaven() мы должны подписаться на Event изменения State, и уже в Listener вызывать данную функцию.

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

Могут быть комбинированные экшены, которые могут запускать другие экшены. Это у нас будет в 10-ом эпизоде. Но надо следить чтобы всё не зациклилось.

Ответить
Дмитрий

Великолепный курс, как и все здесь. Начинающему - сложновато будет, но тому, кто уже что-то может, - в самый раз. Спасибо и продолжайте в том же духе!

Ответить
Владимир

Откуда взялось это слово - "целиковый". Разве слово "цельный" не передают сути?

Ответить
S.Polessky
function combineReducers(reducers) {
    return (state = {}, action) => {
      const result = {};
      Object.entries(reducers).forEach(([key, reducer]) => {
        result[key] = reducer(state[key], action)
      })
      return result
    }
}

Откуда берутся данные, которые идут в качестве аргументов в стрелочную функцию:

return (state = {}, action) => {...

Например: тот же action. Он внутри каждого Reducer'а по отдельности же.

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

При вызове:

store.dispatch(favoriteLot(id))

происходит:

class Store
{
  ...
  function dispatch(action) {
    this.state = this.reducer(this.state, action)
    ...
  }
}

То есть метод dispatch в state передаёт текущий this.state, а в action попадает именно этот результат функции favoriteLot(id), который мы ему передаём.

То есть мы могли бы записать вызов так:

const action = favoriteLot(id)
store.dispatch(action)

для большей наглядности.

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

Или войти через:

Yandex
MailRu
GitHub
Google