Weekly Progress 5 — Immutability in Redux and how to implement it in Voucher Page

Pada blog post kali ini saya akan sharing ilmu mengenai immutability pada redux dan bagaimana cara mengimplementasikannya pada voucher page.

What Have I Done ?

Membuat dan mengintegrasikan user management dan voucher management page

Pada minggu 13 ppl kali ini saya mengerjakan front-end dan wiring voucher page dengan front-end. Dalam mengimplementasikan voucher page ini saya mendapatkan banyak sekali ilmu, diantaranya adalah menerapkan disipline immutable state pada proyek ppl saya kali ini.

Start a deep breath! yes, because we’re going to talk about immutable state in Redux 🎃

Ketika berbicara mengenai redux sangat erat kaitannya dengan immutable state dan pure function. Lalu apakah itu ? Pure function adalah sebuah kondisi dimana sebuah fungsi tidak boleh mengubah input value yang diberikan (immutable) sehingga fungsi tersebut tidak memberikan side effect. Contohnya adalah fungsi Math.cos(x) apabila kita memberikan nilai x yang sama maka hasil dari Math.cos(x) akan selalu menghasilkan nilai yang sama. Sedangkan Immutable state adalah sebuah ide atau disiplin dimana kita dilarang mengubah state secara langsung.

berikut ini merupakan kode yang tidak mengimplementasikan immutablity state dan akan menghasilkan sideEffect :

var count = 0;

function getResponse() {
    // Here we are creating a side-effect of calling getResponse()
    count += 1;
    
    return 'I have produced a side-effect';
}

var response = getResponse();

Pada voucher page saya mengimplementasikan immutabllity pada reducer, yaitu dapat dilihat dalam potongan kode ini :

function voucherManagementPageReducer(state = initialState, action) {
  switch (action.type) {
    case DEFAULT_ACTION:
      return state;
    case GET_VOUCHERS_REQUEST:
      return state.merge({
        isLoading: true,
        error: null,
      });
    case GET_VOUCHERS_SUCCESS:
      return state.merge({
        isLoading: false,
        error: null,
        vouchers: action.payload,
      });
    case GET_VOUCHERS_FAILED:
      return state.merge({
        isLoading: false,
        error: action.payload,
      });
}

Pada potongan kode diatas dilakukan state.merge yaitu dengan menggunakan redux immutability pattern dengan melakukan merging daripada set state pada redux.

Ada terdapat banyak pro dan kontra mengenai immutability pada react redux diantaranya
Pro :

• Dengan menggunakan immutability dapat meningkatkan performa pada komponen
• Data Changes akan terlihat eksplisit
• Akan membuat beberapa fitur menjadi lebih mudah, satu-satunya side effect yang dihasilkan dari immutable data structures adalah kita hanya akan mendapatkan data sebelumnya. Sebenarnya terdapat cara lain untuk melakukan hal tersebut, yaitu dengan menggunakan mutable approach. Namun, dengan menggunakan immutable approach semua perubahan state terlihat seamless.

Cons :

• Membutuhkan dependensi untuk membuat hal tersebut benar. Banyak hal yang perlu dipelajari sebelum mengerti mengenai konsep immutable di dalam react diantaranya map yang dapat membantu untuk meng implementasikan immutability dalam kode.
• Memiliki performa yang lebih jelek apabila dalam dataset yang kecil. Ketika menggunakan immutable data struktur ini merupakan sebuah hal yang wajar dihadapi. Mutasi merupakan hal yang dapat sangat meningkatkan performa pada beberapa programming language. Akan tetapi masalah performa ini sangat negligilble semakin besar dataset yang kita punya maka semakin negligible masalah performa ini.
• Membutuhkan disiplin dalam team. Immutability merupakan sebuah ide, tidak ada yang dapat menghentikanmu dari mengubah objek secara langsung. Butuh disiplin untuk menerapkan ide ini.

What have I learn ?

• Immutability in Redux
• Redux in depth
• Django REST API
• Thousand Module in React

What problem did I encounter ?

Saya mengalami masalah ketika melakukan immutable pattern pada redux sehingga cukup banyak memakan waktu

What am I going to do next?

Mengintegrasikan add voucer dan menyelesaikan 8 backlog sisanya