Почему redux нуждаются в редуллерах, чтобы быть «чистыми функциями»

Автор оригинала: FreeCodeCamp Community Member.

Раджараодомв

Возможно, вы слышали, что Redux зависит от «чистых функций» от функционального программирования. Ну, что именно это значит?

На рисунке ниже показано простое приложение TODO от Примеры Redux Отказ В настоящее время у него четыре задания. Он показывает четвертый, как завершено, и устанавливается, чтобы показать «все» задачи – как завершенные, и не завершенные.

Правая сторона показывает текущее состояние, хранящееся в redux. Это простой объект JavaScript, который захватывает все детали в одном месте.

Это красота redux.

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

Теперь, если вы посмотрите на редуктор для «TOGGLE_TODO» – тот, который переключает статус элемента TODO между завершенным и не завершен – он выглядит ниже ( Вот исходный код ):

Когда вы переключите состояние товара TODO, это то, что происходит: функция редуктора принимает объект, представляющий «старое» состояние (то есть вход в функцию), затем создает совершенно новый объект, копируя все детали старого объекта в него (Мне нравится ID и текст ) и переопределения старых свойств с новыми ( Завершено опора).

Чистые функции

На основе фундаментального уровня любая функция, которая не изменяет входные данные, и это не зависит от внешнего состояния (например, базы данных, DOM, или глобальной переменной) и последовательно предоставляет тот же выход для того же ввода, является «чистой» функцией Отказ

Например, ниже Добавить Функция не изменяет «A» или «B», не зависит от внешнего состояния и всегда возвращает тот же выход для одного и того же ввода.

const add = (a, b) => a + b //pure function

Теперь, если вы посмотрите на нашу функцию редуктора, это «чистая» функция, поскольку она имеет те же функции.

Но почему редуктор должен быть «чистой» функцией?

Посмотрим, что произойдет, если мы сделаем наш редуктор «нечистый». Давайте прокомментируем раздел, в котором он создает новый объект, и вместо этого давайте мутитировать завершенное опора штата напрямую.

case 'TOGGLE_TODO':      if (state.id !== action.id) {        return state;      }

            // return {      //   ...state,      //   completed: !state.completed      // }

      state.completed = !state.completed;//change original object      return state;

default: ...

Теперь, если мы попытаемся переключить Todo после этого изменения, ничего не происходит!

Посмотрим, что происходит в источнике redux.

Redux принимает данное состояние (объект) и передает его каждому редуктору в петле. И он ожидает, что Новый Объект от редуктора, если есть любой изменения. И это также ожидает, чтобы вернуть старый объект, если нет изменений.

Redux просто проверяет, является ли старый объект таким же, как новый объект, сравнивая местоположение памяти двух объектов. Поэтому, если вы мутируете свойство старого объекта внутри редуктора, «новое состояние» и «старое состояние» будут указывать на тот же объект. Следовательно, Redux думает, что ничего не изменилось! Так что это не будет работать.

Но он все еще не отвечает на некоторые ключевые вопросы, такие как:

Почему redux разработан как это?
Почему Redux не может сделать копию старого штата какое-то место еще, а затем сравнить объектные реквизиты от редукторов?
Почему redux представляет эту нагрузку на отдельных разработчиков?

Ответ: Есть только один способ узнать, если два объекта JavaScript имеют одинаковые свойства. Глубоко сравнивать их.

Но это становится чрезвычайно дорогим в реальных мировых приложениях из-за типично крупных объектов и количества того, как их нужно сравнить.

Итак, одна работа – это иметь политику попросить разработчиков создать Новый Объект всякий раз, когда есть изменение, то отправьте его в рамки. И если нет изменений, то отправьте обратно старый объект, как это так. Другими словами, новые объекты представляют новые состояния.

Обратите внимание, что вы должны клонировать старые состояния, используя ломтик – или аналогичный механизм – копировать старые значения в новый объект.

Теперь, с этой политикой на месте вы можете сравнить местоположение памяти двух объектов, используя ! == без необходимости сравнивать каждую свойство в каждом объекте. И если два объекта не одинаковы, то вы знаете, что объект изменил состояние (то есть некоторая недвижимость где-то в объекте JavaScript изменилось). Это именно стратегия Redux использует, чтобы сделать работу.

Так вот почему redux нуждаются в «редукторах», чтобы быть чистыми функциями!

Спасибо за чтение! Если вам понравилось сообщение, пожалуйста? И поделиться этим в Twitter! ??

Некоторые из моих других постов

Производительность реагирования:

Функциональное программирование

ES6

WebPack.

Проект.js.

Реагировать и redux:

Salesforce.

Разработка приложений React Redux в VisualForce SaleForce