Учебники

Redux — чистые функции

Декабрь 18, 2018

Функция — это процесс, который принимает входные данные, называемые аргументами, и производит некоторые выходные данные, известные как возвращаемое значение. Функция называется чистой, если она соблюдает следующие правила:

  • Функция возвращает тот же результат для тех же аргументов.

  • Его оценка не имеет побочных эффектов, т. Е. Не изменяет входные данные.

  • Нет мутации локальных и глобальных переменных.

  • Он не зависит от внешнего состояния, как глобальная переменная.

Функция возвращает тот же результат для тех же аргументов.

Его оценка не имеет побочных эффектов, т. Е. Не изменяет входные данные.

Нет мутации локальных и глобальных переменных.

Он не зависит от внешнего состояния, как глобальная переменная.

Давайте возьмем пример функции, которая дважды возвращает значение, переданное в качестве входа в функцию. В общем, это записывается как, f (x) => x * 2. Если функция вызывается со значением аргумента 2, то результатом будет 4, f (2) => 4.

Давайте напишем определение функции в JavaScript, как показано ниже — 

const double = x => x*2; // es6 arrow function
console.log(double(2));  // 4

Здесь double — это чистая функция.

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

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

Давайте предположим, что редуктор добавляет товар в вашу корзину, как указано ниже — 

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart; //original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

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

Причина такого поведения заключается в следующем —

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

Таким образом, необходимо, чтобы редуктор был чистой функцией в Redux. Вот способ написать это без мутации:

50
Share: