♂️ 🏇🏿 ♏️ Redux vs MobX tanpa kebingungan 🚘 🧜🏻 🧜

Dalam beberapa tahun terakhir, saya sering menggunakan Redux , tetapi baru-baru ini saya telah menggunakan MobX sebagai alternatif untuk manajemen negara. Alternatif redux tampaknya secara alami berubah menjadi berantakan. Orang tidak yakin solusi mana yang harus dipilih. Masalahnya belum tentu Redux vs MobX. Setiap kali ada alternatif, orang ingin tahu cara terbaik untuk menyelesaikan masalah mereka. Saya menulis baris ini untuk menghilangkan kebingungan seputar solusi manajemen negara Redux dan MobX.

Tentang apakah artikel ini? Pertama, saya ingin kembali ke masalah yang dipecahkan oleh perpustakaan manajemen negara. Pada akhirnya, semuanya akan baik-baik saja jika Anda hanya menggunakan this.setState () dan this.state dalam React atau variasinya di pustaka tingkat presentasi lain atau dalam lingkungan SPA. Kedua, saya akan terus memberi Anda gambaran dari kedua solusi, menunjukkan konsistensi dan perbedaan. Last but not least, jika Anda sudah memiliki aplikasi yang bekerja dengan MobX atau Redux, saya ingin memberi tahu Anda tentang refactoring dari satu perpustakaan negara ke yang lain.

Kandungan:

Masalah apa yang kita pecahkan?

Semua orang ingin memiliki manajemen negara dalam aplikasi. Tetapi masalah apa yang dipecahkan ini bagi kita? Kebanyakan orang mulai dengan aplikasi kecil dan sudah menerapkan perpustakaan manajemen negara. Semua orang membicarakannya, bukan? Redux! MobX! Tetapi sebagian besar aplikasi tidak memerlukan manajemen negara yang ambisius sejak awal. Ini bahkan lebih berbahaya karena kebanyakan orang tidak akan pernah dihadapkan dengan masalah seperti perpustakaan seperti Redux atau MobX .

Status quo saat ini sedang membangun aplikasi front-end dengan komponen. Komponen memiliki keadaan internal. Dalam aplikasi yang berkembang, manajemen negara dapat menjadi kacau dengan negara lokal, karena:

suatu komponen harus berbagi status dengan komponen lain
suatu komponen harus mengubah keadaan komponen lain

Di beberapa titik, menjadi semakin sulit untuk berbicara tentang keadaan aplikasi. Ini menjadi web kotor objek negara dan mutasi status dalam hierarki komponen Anda. Dalam kebanyakan kasus, objek negara dan mutasi negara tidak selalu dikaitkan dengan satu komponen. Mereka ditautkan melalui pohon komponen Anda, dan Anda harus menaikkan dan menurunkan status.

Solusinya, oleh karena itu, adalah untuk memperkenalkan perpustakaan manajemen negara seperti MobX atau Redux. Ini memberi Anda alat untuk menyimpan status Anda, mengubah status, dan menerima pembaruan status. Anda memiliki satu tempat untuk mencari, satu tempat untuk berubah, dan satu tempat untuk menerima pembaruan status. Dia mengikuti prinsip satu sumber kebenaran.. Ini membuatnya lebih mudah untuk beralasan tentang perubahan kondisi dan kondisi Anda, karena mereka terpisah dari komponen Anda.

Perpustakaan manajemen negara seperti Redux dan MobX sering memiliki add-on untuk utilitas, misalnya, untuk Angular mereka memiliki angular-redux dan mobx-angular untuk memberikan komponen Anda akses ke keadaan. Seringkali, komponen ini disebut komponen kemas, atau, lebih tepatnya, komponen terkait . Dari mana saja dalam hierarki komponen Anda, Anda dapat mengakses status dan mengubahnya dengan memperbarui komponen Anda ke yang terkait.

Apa perbedaan antara REDUX dan MOBX?

Sebelum kita membahas perbedaannya, saya ingin memberi tahu Anda tentang persamaan antara MobX dan Redux.

Kedua perpustakaan digunakan untuk mengontrol keadaan dalam aplikasi JavaScript. Mereka tidak selalu dikaitkan dengan perpustakaan seperti Angular. Mereka juga digunakan di perpustakaan lain seperti ReactJs dan VueJs.

Jika Anda memilih salah satu solusi manajemen negara, Anda tidak akan mengalami penguncian vendor. Anda dapat beralih ke solusi manajemen negara lain kapan saja. Anda dapat meningkatkan dari MobX ke Redux atau dari Redux ke MobX. Nanti saya akan tunjukkan bagaimana ini terjadi.

Redux dirancang oleh Dan Abramov dan Andrew Clark adalah turunan dari arsitektur Flux. Tidak seperti Flux, ia menggunakan satu repositori lebih dari beberapa untuk mempertahankan status. Selain itu, alih-alih operator, ia menggunakan fungsi murni untuk mengubah status. Jika Anda tidak terbiasa dengan alur dan Anda baru dalam manajemen negara bagian, jangan khawatir tentang paragraf terakhir.

Redux dipengaruhi oleh prinsip - prinsip pemrograman fungsional (FP). FP dapat dilakukan dalam JavaScript, tetapi banyak orang datang dari latar belakang berorientasi objek, seperti Java, dan mengalami kesulitan menerima prinsip pemrograman fungsional. Ini nanti menjelaskan mengapa MobX mungkin lebih mudah dipelajari sebagai pemula.

Karena Redux termasuk pemrograman fungsional, ia menggunakan fungsi murni .

Fungsi murni adalah fungsi yang menerima input, mengembalikan output, dan tidak memiliki dependensi lain selain fungsi yang sama. Fungsi seperti itu selalu menghasilkan output yang sama dengan input yang sama dan tidak memiliki efek samping. Keterangan lebih lanjut

(state, action) => newState

Status Redux Anda tidak berubah . Alih-alih bermutasi, Anda selalu mengembalikan negara baru. Anda tidak melakukan mutasi negara dan tidak bergantung pada referensi objek.


//     Redux,     
function addAuthor(state, action) {
  return state.authors.push(action.author);
}
//       
function addAuthor(state, action) {
  return [ ...state.authors, action.author ];
}

Dan yang tak kalah pentingnya, dalam Redux idiomatik, kondisi Anda dinormalisasi , seperti dalam database. Entitas merujuk satu sama lain hanya dengan id . Ini adalah praktik terbaik. Meskipun tidak semua orang melakukannya, Anda dapat menggunakan perpustakaan seperti normalizr untuk mencapai keadaan yang dinormalisasi. Keadaan normalisasi memungkinkan Anda untuk mempertahankan keadaan datar dan entitas sebagai satu- satunya sumber kebenaran .

{
  post: {
    id: 'a',
    authorId: 'b',
    ...
  },
  author: {
    id: 'b',
    postIds: ['a', ...],
    ...
  }
}

Sebagai perbandingan, MobX Michel Weststratt dipengaruhi tidak hanya oleh pemrograman berorientasi objek, tetapi juga oleh pemrograman reaktif. Itu membungkus negara Anda dalam benda yang bisa diamati. Dengan demikian, Anda memiliki semua fitur "Dapat Diamati " di negara Anda. Data dapat memiliki setter dan getter sederhana, tetapi dapat diamati memungkinkan Anda untuk menerima pembaruan setelah perubahan data.

Di Mobx, status Anda tidak stabil . Dengan cara ini Anda mengubah status secara langsung:

function addAuthor(author) {
  this.authors.push(author);
}

Selain itu, organisasi tetap berada dalam struktur data bersarang (dalam) sehubungan satu sama lain. Anda tidak menormalkan kondisi Anda. Kondisi tetap didenormalkan dan tertanam.

{
  post: {
    id: 'a',
    ...
    author: {
      id: 'b',
      ...
    }
  }
}

Satu repositori versus beberapa

Di Redux, Anda menyimpan semua status Anda dalam satu repositori global atau dalam satu status global . Satu objek negara adalah satu-satunya sumber kebenaran Anda. Di sisi lain, banyak gearbox memungkinkannya untuk mengubah keadaan yang tidak berubah.

Sebagai perbandingan, MobX menggunakan beberapa repositori. Seperti Redux reducers, Anda dapat menerapkan pemisahan dan penaklukan berdasarkan tingkat teknis, domain, dll. Anda dapat menyimpan objek domain dalam repositori terpisah, tetapi Anda juga dapat mengontrol status tampilan di repositori Anda. Pada akhirnya, Anda menempatkan negara yang paling tepat untuk aplikasi Anda.

Secara teknis, Anda dapat memiliki beberapa repositori di Redux juga. Tidak ada yang memaksa Anda untuk menggunakan hanya satu. Tapi ini bukan kasus penggunaan Redux yang diiklankan. Menggunakan banyak repositori bertentangan dengan praktik terbaik. Di Redux, Anda ingin memiliki satu repositori yang merespons melalui reduksi ke acara global.

Seperti apa implementasinya?

Di Redux, menambahkan konfigurasi aplikasi ke status global memerlukan baris kode berikut.

const initialState = {
  users: [
    {
      name: 'Alex'
    },
    {
      name: 'Nik'
    }
  ]
};
// reducer
function users(state = initialState, action) {
  switch (action.type) {
  case 'USER_ADD':
    return { ...state, users: [ ...state.users, action.user ] };
  default:
    return state;
  }
}
// action
{ type: 'USER_ADD', user: user };

Di MobX, penyimpanan hanya akan mengelola media (karena peredam di Redux mengontrol media), tetapi Anda dapat langsung mengubah statusnya. Anotasi @observable memungkinkan Anda mengamati perubahan status.

class userStore{
@observable users = [
    {
      name: 'Nikita'
    }
  ];
}

Sekarang Anda dapat memanggil userStore.users.push (pengguna); pada salinan toko. Namun, direkomendasikan bahwa mutasi negara lebih eksplisit melalui tindakan.

class userStore{
@observable users = [
    {
      name: 'Nikita'
    }
  ];
}
@action addUser = (user) => {
    this.users.push(user);
  }

Anda dapat dengan ketat menerapkannya dengan mengkonfigurasi MobX dengan configure ({empceActions: true}) ;. Sekarang Anda dapat mengubah status Anda dengan memanggil userStore.addUser (pengguna); pada salinan toko.

Anda telah melihat cara memperbarui status di Redux dan MobX. Di Redux, status Anda hanya baca . Anda hanya dapat mengubah status dengan tindakan eksplisit . Sebaliknya, di MobX, negara termasuk membaca dan menulis. Anda dapat mengubah keadaan secara langsung tanpa menggunakan tindakan, tetapi Anda dapat memilih tindakan eksplisit menggunakan konfigurasi penegakanAksi.

React state learning curve

Redux dan MobX keduanya digunakan dalam aplikasi Bereaksi. Tapi ini adalah perpustakaan manajemen negara mandiri yang dapat digunakan di mana saja tanpa Bereaksi. Perpustakaan interaksi mereka membuatnya mudah untuk menggabungkannya dengan komponen Angular. Ini adalah reaksi-redux untuk React + Redux dan mobx-react untuk React + MobX . Nanti saya akan menjelaskan cara menggunakan keduanya di komponen pohon sudut.

Dalam diskusi baru-baru ini, telah terjadi bahwa orang-orang berdebat tentang kurva pembelajaran di Redux. Ini sering terjadi dalam konteks Bereaksi: orang-orang mulai belajar Bereaksi dan sudah ingin menggunakan manajemen negara dengan Redux. Kebanyakan orang mengklaim bahwa Bereaksi dan Redux sendiri memiliki kurva belajar yang baik, tetapi keduanya dapat luar biasa. Karena itu, MobX akan menjadi alternatif, karena lebih cocok untuk pemula.

Namun, saya akan menyarankan pendekatan yang berbeda untuk pengguna Bereaksi baru untuk belajar tentang manajemen negara dalam ekosistem Bereaksi. Mulai belajar Bereaksi dengan fitur manajemen negara bagian Anda sendiri dalam komponen. Dalam aplikasi Bereaksi, Anda pertama kali belajar tentang metode siklus hidup Bereaksi dan memahami cara mengelola status lokal dengan setState () dan this.state. Saya sangat merekomendasikan jalur pembelajaran ini. Jika tidak, Anda akan cepat kewalahan oleh ekosistem Bereaksi. Pada akhirnya, sepanjang jalan Anda akan menyadari bahwa mengelola keadaan (internal) komponen menjadi rumit.

Redux atau MobX untuk pemula?

Dengan membiasakan diri Anda dengan komponen Angular dan manajemen keadaan internal, Anda dapat memilih perpustakaan manajemen negara untuk menyelesaikan masalah Anda. Setelah saya menggunakan kedua perpustakaan, saya akan mengatakan bahwa MobX bisa sangat nyaman bagi pemula. Kami telah melihat bahwa MobX membutuhkan lebih sedikit kode, meskipun ia menggunakan beberapa catatan ajaib yang belum perlu kami ketahui.
Dengan MobX, Anda tidak perlu terbiasa dengan pemrograman fungsional. Istilah seperti ketidakberubahan mungkin masih asing.

— , JavaScript. , , - , , MobX.

Redux

Ketika aplikasi Anda tumbuh lebih besar dan beberapa pengembang mengerjakannya, Anda harus mempertimbangkan untuk menggunakan Redux. Secara alami, ia berjanji untuk menggunakan tindakan eksplisit untuk mengubah keadaan. Tindakan memiliki jenis dan muatan yang dapat digunakan gearbox untuk mengubah status. Sangat mudah bagi tim pengembangan untuk berbicara tentang perubahan status dengan cara ini.

Redux memberi Anda seluruh arsitektur untuk mengelola negara dengan batasan yang jelas. Kisah Sukses Redux .

Keuntungan lain dari Redux adalah penggunaannya di sisi server. Karena kita berhadapan dengan JavaScript sederhana, Anda dapat mengirim status melalui jaringan. Serialisasi dan deserialisasi objek negara berfungsi di luar kotak. Namun, ini juga dimungkinkan dengan MobX.

MobX kurang percaya diri, tetapi dengan configure ({empceActions: true}) Anda dapat menerapkan pembatasan yang lebih tepat, seperti pada Redux. Itu sebabnya saya tidak akan mengatakan bahwa Anda tidak dapat menggunakan MobX untuk skala aplikasi, tetapi Redux memiliki cara yang jelas untuk melakukan sesuatu. Dokumentasi MobX bahkan mengatakan: " [MobX] tidak memberi tahu Anda bagaimana menyusun kode Anda, di mana menyimpan keadaan, atau bagaimana menangani acara ." Tim pengembangan pertama-tama harus membuat arsitektur manajemen negara.

Lagi pula, kurva pembelajaran manajemen negara tidak terlalu curam. Ketika kami mengulangi rekomendasinya, seorang pemula yang akan Bereaksi akan terlebih dahulu belajar cara menggunakan setState () dan this.state dengan benar . Setelah beberapa saat, Anda akan memahami masalah hanya menggunakan setState ()untuk mempertahankan status di aplikasi Bereaksi. Saat mencari solusi, Anda menemukan perpustakaan manajemen negara seperti MobX atau Redux. Tapi yang mana yang harus dipilih? Karena MobX kurang percaya diri, memiliki templat yang lebih kecil dan dapat digunakan dengan cara yang sama seperti setState (), saya akan merekomendasikan memberi MobX kesempatan dalam proyek-proyek kecil. Segera setelah aplikasi bertambah besar dan menambah jumlah peserta, Anda harus mempertimbangkan untuk menerapkan batasan tambahan di MobX atau memberi kesempatan pada Redux. Saya suka menggunakan kedua perpustakaan. Bahkan jika Anda tidak menggunakan salah satu dari mereka pada akhirnya, masuk akal untuk melihat cara alternatif untuk mengelola negara.

Pikiran terakhir

Setiap kali saya membaca komentar dalam diskusi Redux vs MobX, selalu ada satu komentar: “ Redux memiliki standar terlalu banyak, Anda harus menggunakan MobX sebagai gantinya. Saya dapat menghapus XXX baris kode . " Komentar itu mungkin benar, tetapi tidak ada yang menganggap kompromi. Redux hadir dengan banyak template seperti MobX karena telah ditambahkan untuk batasan desain tertentu. Ini memungkinkan Anda untuk mempertimbangkan keadaan aplikasi Anda, bahkan jika itu dalam skala yang lebih besar. Seluruh upacara yang terkait dengan perlakuan negara, tidak adil.

Perpustakaan Redux cukup kecil. Sebagian besar waktu Anda hanya berurusan dengan objek dan array JavaScript sederhana.. Ini lebih dekat ke vanilla JavaScript daripada MobX. Di MobX, objek dan array dibungkus dengan objek yang dapat diamati yang menyembunyikan sebagian besar templat standar. Itu dibangun di atas abstraksi tersembunyi di mana sihir terjadi, tetapi lebih sulit untuk memahami mekanisme dasarnya. Redux memudahkan untuk membicarakan hal ini dengan JavaScript sederhana. Ini membuatnya mudah untuk menguji dan men-debug aplikasi.

Selain itu, Anda perlu memikirkan kembali dari mana kami berasal di SPA. Sekelompok kerangka satu halaman dan pustaka aplikasi memiliki masalah manajemen negara yang sama yang akhirnya diselesaikan dengan menggunakan model stream yang komprehensif. Redux adalah penerus pendekatan ini.

Di MobX, sekali lagi bergerak ke arah yang berlawanan. Kami kembali mulai mengubah keadaan secara langsung, tanpa mengambil keuntungan dari pemrograman fungsional. Bagi sebagian orang, ini sekali lagi mendekati pengikatan data dua arah. Setelah beberapa waktu, orang mungkin lagi menghadapi masalah yang sama sebelum perpustakaan manajemen negara seperti Redux muncul. Manajemen negara tersebar di seluruh komponen dan berakhir berantakan.

Sementara di Redux Anda memiliki upacara yang mapan untuk mengatur segalanya, MobX kurang percaya diri. Tetapi akan lebih bijaksana untuk menerima pengalaman MobX terbaik. Orang-orang perlu tahu bagaimana mengatur manajemen negara untuk meningkatkan argumen mereka tentang hal itu. Kalau tidak, orang cenderung mengubah status langsung dalam komponen.

Kedua perpustakaan itu bagus. Meskipun Redux sudah mapan, MobX menjadi alternatif yang layak untuk manajemen negara.

Sumber daya lebih banyak

perbandingan Michel Weststratt - pencipta
MobX

Redux vs MobX tanpa kebingungan