Redux - Fungsi Murni

Fungsi adalah proses yang mengambil input yang disebut argumen, dan menghasilkan beberapa output yang disebut nilai kembali. Suatu fungsi disebut murni jika mematuhi aturan berikut -

Sebuah fungsi mengembalikan hasil yang sama untuk argumen yang sama.
Evaluasinya tidak memiliki efek samping, yaitu tidak mengubah data masukan.
Tidak ada mutasi variabel lokal & global.
Itu tidak tergantung pada keadaan eksternal seperti variabel global.

Mari kita ambil contoh sebuah fungsi yang mengembalikan dua kali nilai yang diteruskan sebagai input ke fungsi tersebut. Secara umum ditulis sebagai, f (x) => x * 2. Jika suatu fungsi dipanggil dengan nilai argumen 2, maka outputnya adalah 4, f (2) => 4.

Mari kita tulis definisi fungsi dalam JavaScript seperti yang ditunjukkan di bawah ini -

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

Here, double is a pure function.

Sesuai dengan tiga prinsip di Redux, perubahan harus dilakukan dengan fungsi murni, yaitu peredam di Redux. Sekarang, pertanyaan muncul mengapa peredam harus merupakan fungsi murni.

Misalkan, Anda ingin mengirimkan tindakan yang tipenya adalah 'ADD_TO_CART_SUCCESS' untuk menambahkan item ke aplikasi keranjang belanja Anda dengan mengklik tombol tambahkan ke keranjang.

Mari kita asumsikan peredam menambahkan item ke keranjang Anda seperti yang diberikan di bawah ini -

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 ;

Mari kita anggap, isAddedToCart adalah properti pada objek status yang memungkinkan Anda memutuskan kapan menonaktifkan tombol 'tambahkan ke keranjang' untuk item tersebut dengan mengembalikan nilai Boolean ‘true or false’. Ini mencegah pengguna untuk menambahkan produk yang sama beberapa kali. Sekarang, alih-alih mengembalikan objek baru, kami memutasi prop isAddedToCart pada status seperti di atas. Sekarang jika kami mencoba menambahkan item ke keranjang, tidak ada yang terjadi. Tombol Tambahkan ke keranjang tidak akan dinonaktifkan.

Alasan perilaku ini adalah sebagai berikut -

Redux membandingkan objek lama dan baru dengan lokasi memori kedua objek tersebut. Ia mengharapkan objek baru dari peredam jika ada perubahan yang terjadi. Dan itu juga mengharapkan untuk mendapatkan kembali objek lama jika tidak ada perubahan yang terjadi. Dalam hal ini, sama saja. Karena alasan ini, Redux berasumsi bahwa tidak ada yang terjadi.

Jadi, peredam perlu menjadi fungsi murni di Redux. Berikut ini adalah cara menulisnya tanpa mutasi -

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;