Redux - czyste funkcje

Funkcja to proces, który przyjmuje dane wejściowe zwane argumentami i generuje dane wyjściowe znane jako wartość zwracana. Funkcja jest nazywana czystą, jeśli podlega następującym regułom -

Funkcja zwraca ten sam wynik dla tych samych argumentów.
Jego ocena nie ma skutków ubocznych, tj. Nie zmienia danych wejściowych.
Brak mutacji zmiennych lokalnych i globalnych.
Nie zależy od stanu zewnętrznego, jak zmienna globalna.

Weźmy przykład funkcji, która zwraca dwukrotność wartości przekazanej jako dane wejściowe do funkcji. Ogólnie jest zapisane jako, f (x) => x * 2. Jeśli wywoływana jest funkcja z argumentem o wartości 2, wynikiem będzie 4, f (2) => 4.

Napiszmy definicję funkcji w JavaScript, jak pokazano poniżej -

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

Here, double is a pure function.

Zgodnie z trzema zasadami w Redux, zmiany muszą być dokonywane za pomocą czystej funkcji, tj. Reduktora w Redux. Teraz pojawia się pytanie, dlaczego reduktor musi być czystą funkcją.

Załóżmy, że chcesz wywołać akcję, której typ to 'ADD_TO_CART_SUCCESS' aby dodać pozycję do aplikacji koszyka, klikając przycisk Dodaj do koszyka.

Załóżmy, że reduktor dodaje produkt do koszyka, jak podano poniżej -

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 ;

Załóżmy, isAddedToCart to właściwość obiektu stanu, która pozwala zdecydować, kiedy wyłączyć przycisk „dodaj do koszyka” dla przedmiotu, zwracając wartość logiczną ‘true or false’. Zapobiega to wielokrotnemu dodawaniu tego samego produktu przez użytkownika. Teraz zamiast zwracać nowy obiekt, modyfikujemy właściwość isAddedToCart na stan jak powyżej. Teraz, jeśli spróbujemy dodać przedmiot do koszyka, nic się nie dzieje. Przycisk Dodaj do koszyka nie zostanie wyłączony.

Przyczyna tego zachowania jest następująca -

Redux porównuje stare i nowe obiekty według lokalizacji w pamięci obu obiektów. Oczekuje nowego obiektu od reduktora, jeśli nastąpiła jakakolwiek zmiana. Oczekuje również, że odzyska stary obiekt, jeśli nie nastąpi żadna zmiana. W tym przypadku jest tak samo. Z tego powodu Redux zakłada, że nic się nie stało.

Dlatego konieczne jest, aby reduktor był czystą funkcją w Redux. Oto sposób na zapisanie go bez mutacji -

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