Redux - Saf İşlevler

Fonksiyon, argümanlar olarak adlandırılan girdileri alan ve dönüş değeri olarak bilinen bazı çıktılar üreten bir süreçtir. Aşağıdaki kurallara uyan bir işlev saf olarak adlandırılır -

Bir işlev, aynı bağımsız değişkenler için aynı sonucu döndürür.
Değerlendirmesinin herhangi bir yan etkisi yoktur, yani girdi verilerini değiştirmez.
Yerel ve global değişkenlerde mutasyon yok.
Global bir değişken gibi dış duruma bağlı değildir.

İşleve girdi olarak geçirilen değerin iki katını döndüren bir işlev örneğini ele alalım. Genel olarak, f (x) => x * 2 şeklinde yazılır. 2 bağımsız değişken değeriyle bir işlev çağrılırsa, çıktı 4 olur, f (2) => 4.

Fonksiyonun tanımını JavaScript'te aşağıda gösterildiği gibi yazalım -

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

Here, double is a pure function.

Redux'teki üç ilkeye göre, değişiklikler saf bir fonksiyon, yani Redux'ta redüktör tarafından yapılmalıdır. Şimdi, bir indirgeyicinin neden saf bir işlev olması gerektiğine dair bir soru ortaya çıkıyor.

Diyelim ki, türü olan bir eylem göndermek istiyorsunuz 'ADD_TO_CART_SUCCESS' Sepete ekle butonuna tıklayarak alışveriş sepeti uygulamanıza bir ürün eklemek için.

Redüktörün sepetinize aşağıdaki gibi bir ürün eklediğini varsayalım -

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 ;

Farz edelim ki, isAddedToCart bir Boolean değeri döndürerek öğe için 'sepete ekle' düğmesini ne zaman devre dışı bırakacağınıza karar vermenize olanak tanıyan durum nesnesi üzerindeki bir özelliktir ‘true or false’. Bu, kullanıcının aynı ürünü birden çok kez eklemesini engeller. Şimdi, yeni bir nesne döndürmek yerine, yukarıdaki gibi durumdaki isAddedToCart prop'unu değiştiriyoruz. Şimdi sepete bir ürün eklemeye çalışırsak hiçbir şey olmuyor. Sepete ekle düğmesi devre dışı bırakılmayacak.

Bu davranışın nedeni aşağıdaki gibidir -

Redux, eski ve yeni nesneleri her iki nesnenin bellek konumuna göre karşılaştırır. Herhangi bir değişiklik olursa redüktörden yeni bir nesne bekler. Ayrıca herhangi bir değişiklik olmazsa eski nesneyi geri almayı bekler. Bu durumda aynıdır. Bu nedenle Redux hiçbir şeyin olmadığını varsayar.

Bu yüzden redüktörün Redux'da saf bir fonksiyon olması gerekir. Aşağıdaki, mutasyon olmadan yazmanın bir yoludur -

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;