JavaScript, React, Redux
Въведение в чистите функции
Чистите функции са силно предпочитани като градивни елементи във функционалното програмиране поради тяхната предвидимост и потенциал за повторно използване.
Има няколко характеристики, които определят функцията като „чиста“.
- Ако се даде същия вход, ще получите същия изход.
- Без странични ефекти.
Предсказуем изход
Можем да предадем аргумент на чиста функция и да знаем, че независимо колко пъти изпълним тази част от кода, ще получим същия резултат.
Вижте този пример по-долу. Без значение на какво приписваме х, ще получим х на квадрат обратно.
function getSquare(x) {
return x * x;
}
Без странични ефекти / Независим
Чистите функции винаги са неизменни. Те не трябва да променят никакви външни променливи. Помислете за разликата между картографиране върху масив и връщане на нов масив спрямо използването на .push() за поставяне на нов елемент в съществуващ масив. Стълбата ще промени оригиналния масив и се счита за нечиста. Опасността при промяна на споделените състояния е, че друга функция може да е разчитала на това първоначално състояние. Сега, след като е променено, това може да доведе до грешки, които може да са трудни за проследяване.
Тест за чистота
Нека приложим това прозрение в действие.
Кой от тези примери е чист и кой нечист?
Option A: function double(x) { return x + x; } function doubleAll(list) { return list.map(double); }Option B: function double(x) { networkCall(x); return x + x; } function doubleAll(list) { for (let i = 0; i < list.length; i++) { list[i] = double(list[i]); } return list; }
Отговор:
Вариант А е чист! Можем да очакваме да получим чисто нов масив, който е създаден чрез картографиране върху оригиналния масив, но без да го променяме по никакъв начин.
Опция Б е нечиста, защото зависи от изхода на мрежово повикване и преминава през списък с елементи, за да върне променен оригинален списък. Ако някакви други функции зависят от този списък, това може да доведе до срив на нашата програма или просто да не се държи по начина, по който сме го планирали.
Използване на React и Redux
Когато работите с React, вашето приложение може да бъде съставено от комбинация от класови и функционални компоненти. Разликата е, че функционалните компоненти се състоят от чисти функции и следователно не поддържат никакво състояние. Те не трябва да променят външно или споделено състояние. Внедряването на функционални компоненти, където можете, е предпочитано за оптимизиране, тъй като те са най-простите и многократно използвани компоненти. Също така си струва да се отбележи, че тези функционални компоненти не са предназначени да съдържат методи на жизнения цикъл.
Един от ключовите принципи на Redux е, че той изисква чисти функции за актуализиране на глобалното дърво на състоянието с всички входящи промени. Наричаме тези чисти функции редуктори. Те приемат предишното състояние и действието, което предоставяме, за да върнат следващото състояние, оставяйки предишното състояние непроменено.
В диаграмата по-долу можете да видите как актуализираме състоянието в Redux, без да променяме първоначалното състояние. Изпращаме действие, което се предава на редуктора. Редукторът взема информацията за текущото състояние и използва чиста функция, за да актуализира магазина с ново състояние въз основа на действието, което сме дали като аргумент.
В заключителната
Според документацията на Redux, „написването на неизменна логика за актуализиране на ръка е трудно и случайно мутирането на състоянието в редуктори е единствената най-честа грешка, която потребителите на Redux правят“.
Има JavaScript библиотека, наречена Immer, която взема нашия променлив код и го преобразува в приемлива чиста функция. Има дори специален метод, наречен createSlice, който можете да използвате, който автоматично включва Immer. Можете да прочетете повече за това тук.
Дотогава си струва да се чувствате комфортно с разпознаването и формулирането на чисти функции, където можете, за по-оптимизиран, многократно използваем код.
