Основные понятия редьюсеров

Как описано в Редьюсеры, функция редьюсера Redux должна:

• Иметь сигнатуру (previousState, action) => newState, аналогичную функции, которую вы бы передали в Array.prototype.reduce(reducer, ?initialValue)
• Быть «чистой», что означает, что редьюсер:
  • Не вызывает побочные эффекты (например, вызов API или изменение объектов или переменных вне локальной области).
  • Не вызывает нечистые функции (например, Date.now или Math.random).
  • Не изменяет свои аргументы. Если редьюсер обновляет состояние, он не должен модифицировать существующий объект состояния на месте. Вместо этого он должен генерировать новый объект, содержащий необходимые изменения. Тот же подход следует применять к любым под-объектам внутри состояния, которые обновляет редьюсер.

Примечание об иммутабельности, побочных эффектах и мутации

Мутация не рекомендуется, поскольку она обычно нарушает отладку во времени, и функция React Redux connect:

• Для отладки во времени Redux DevTools ожидают, что повторное воспроизведение записанных действий будет выводить значение состояния, но не будет ничего больше изменять. Побочные эффекты, такие как мутация или асинхронное поведение, приведут к тому, что отладка во времени изменит поведение между шагами, что нарушит приложение.
• Для React Redux, connect проверяет, изменились ли свойства, возвращённые функцией mapStateToProps, чтобы определить, нужно ли обновлять компонент. Для повышения производительности connect использует некоторые сокращения, которые полагаются на то, что состояние является неизменяемым, и использует проверки поверхностного равенства ссылок для обнаружения изменений. Это означает, что изменения, внесенные в объекты и массивы путем непосредственной мутации, не будут обнаружены, и компоненты не будут перерендериться.

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

Из-за этих правил важно, чтобы следующие основные концепции были полностью поняты, прежде чем переходить к другим конкретным методам организации редьюсеров Redux:

Основы редьюсеров Redux

Ключевые понятия:

• Мыслить в терминах состояния и формы состояния
• Делегирование ответственности за обновление по срезу состояния (составление редьюсеров)
• Редьюсеры высшего порядка
• Определение начального состояния редьюсера

Список литературы:

• Документация Redux: Редьюсеры
• Документация Redux: Упрощение кода
• Документация Redux: Реализация истории отмены
• Документация Redux: combineReducers
• Сила редьюсеров высшего порядка
• Stack Overflow: Чтение начального состояния хранилища и combineReducers
• Stack Overflow: Имена ключей состояния и combineReducers

Чистые функции и побочные эффекты

Ключевые понятия:

• Побочные эффекты
• Чистые функции
• Как мыслить в терминах комбинирования функций

Список литературы:

• Маленькая идея функционального программирования
• Понимание программных побочных эффектов
• Изучение функционального программирования на JavaScript
• Введение в разумно чистое функциональное программирование

Управление неизменяемыми данными

Ключевые понятия:

• Изменяемость против неизменяемости
• Безопасное обновление объектов и массивов без изменения
• Избегание функций и операторов, изменяющих состояние

Список литературы:

• Плюсы и минусы использования неизменяемости с React
• JavaScript и неизменяемость
• Неизменяемые данные с помощью ES6 и далее
• Неизменяемые данные с нуля
• Документация Redux: Использование оператора расширения объектов

Нормализация данных

Ключевые понятия:

• Структура и организация баз данных
• Разделение реляционных/вложенных данных на отдельные таблицы
• Хранение единого определения для заданного элемента
• Ссылка на элементы по идентификаторам
• Использование объектов с ключами по идентификаторам элементов в качестве справочников и массивов идентификаторов для отслеживания порядка
• Связывание элементов в отношениях

Список литературы:

• Нормализация баз данных простым языком
• Идиоматический Redux: Нормализация формы состояния
• Документация Normalizr
• Redux без ругательств: Normalizr
• Запрос к хранилищу Redux
• Википедия: Ассоциативный сущность
• Проектирование баз данных: Многие-ко-многим
• Избежание случайной сложности при структурировании состояния приложения