MobX atau Redux: Mana yang Lebih Baik Untuk Bereaksi Manajemen Negara?

Dalam JavaScript, manajemen negara adalah diskusi yang hangat akhir-akhir ini. Ketika datang untuk menerapkan manajemen negara, pengembang sering merasa kesulitan berurusan dengan kode boilerplate di Redux. Oleh karena itu, MobX telah terbukti menjadi alternatif yang baik untuk Redux yang memberikan fungsi yang sama dengan lebih sedikit kode untuk ditulis. Namun, kedua alat manajemen negara berfungsi baik dengan React.

Pertama mari kita lihat hal-hal umum di antara keduanya:

1) Keduanya mendukung debugging perjalanan waktu
2) Keduanya berisi perpustakaan open-source
3) Keduanya menyediakan manajemen negara sisi klien
4) Keduanya memberikan dukungan besar untuk Bereaksi kerangka kerja asli

Di blog ini, kami telah membuat daftar semua pro dan kontra dari kedua solusi manajemen negara. Ini akan membantu pengembang web untuk memilih yang terbaik untuk proyek mereka berikutnya. Sebelum membahas hal ini, kami telah membandingkan Redux dan Mobx berdasarkan beberapa parameter seperti yang diberikan di bawah ini:

-> Pemeliharaan & Scalable

Karena adanya fungsi murni & paradigma pemrograman fungsional, Redux lebih terukur & terpelihara. Oleh karena itu, hal-hal taksi mudah dikontrol dengan Redux.

-> Proses debug

Debugging di Redux adalah pengalaman yang baik dibandingkan dengan MobX karena menyediakan alat pengembang yang mengagumkan dan hadir dengan abstraksi yang lebih sedikit. Dengan paradigma fluks, Redux menjadi lebih mudah diprediksi. Di sisi lain, karena lebih banyak abstraksi dan alat pengembang rata-rata, debugging di MobX jauh lebih sulit.

-> Kurva belajar

Untuk belajar MobX itu mudah karena dilengkapi dengan kurva belajar yang mantap. Kehadiran abstraksi maksimum membuatnya mudah dipelajari dan pengembang JavaScript yang akrab dengan konsep OOP memiliki basis di MobX. Di sisi lain, Redux menggunakan paradigma pemrograman fungsional yang membuatnya sulit untuk dipahami secara langsung.

-> Komunitas

Redux memiliki basis komunitas yang besar dibandingkan dengan MobX. Karenanya, Redux memberikan dukungan komunitas yang hebat kepada pengembang kapan saja di mana saja.

-> Najis vs murni

MobX tidak murni karena negara dapat ditimpa. Di sini, Anda dapat dengan mudah memperbarui status dengan nilai-nilai baru. Namun, Redux murni karena menggunakan fungsi murni. Di sini, negara-negara hanya-baca dan tidak bisa ditimpa langsung. Status sebelumnya diganti dengan status baru.

-> Dapat diamati vs data biasa

MobX menggunakan observable untuk menyimpan sementara Redux menggunakan data Javascript normal untuk menyimpan nilai. Di Redux, semua pembaruan dilacak secara manual.

-> Toko

Toko adalah sesuatu tempat data ditempatkan. MobX memiliki lebih dari satu toko di mana toko-toko ini dipisahkan secara logis. Di sisi lain, Redux memiliki satu toko besar di mana semua negara disimpan. Data biasanya dinormalisasi di Redux dan data disimpan dinormalisasi di MobX.

Redux vs MobX: Perbandingan Kode

Alat peraga injeksi

Fungsi react-redux's connect () digunakan untuk melewati status dan tindakan untuk mendukung di Redux. Itu ditunjukkan di bawah ini:

// mengakses alat peraga

<ContactForm contact={this.props.contact} loading={this.props.loading} onSubmit={this.submit} /> 

// berfungsi untuk menyuntikkan status ke alat peraga

 function mapStateToProps(state) { return { contact: state.contactStore.contact, errors: state.contactStore.errors } } 

// menyuntikkan status dan tindakan ke dalam alat peraga

 export default connect(mapStateToProps, { newContact, saveContact, fetchContact, updateContact })(ContactFormPage); 

Di MobX, inject digunakan untuk menyuntikkan koleksi toko. Ini akan membuat toko tersedia dalam alat peraga. Di sini, status dan tindakan diakses melalui properti di objek toko sehingga tidak perlu melewatinya secara terpisah.

 @inject("stores") @observer // injecting store into props class ContactFormPage extends Component { … // accessing store via props const { contactStore:store } = this.props.stores; return ( <ContactForm store={store} form={this.form} contact={store.entity} /> ) … } 

Oleh karena itu, kami menggunakan redux-connect-decorators untuk menyederhanakan kode Redux dan versi MobX selalu mudah dibaca. Makanya, tidak ada pemenang yang jelas.

Bootstrap

Di Redux, pertama, tentukan store dan App diteruskan melalui Penyedia. Untuk menangani fungsi asinkron, Anda juga perlu mendefinisikan redux-thunk dan redux-janji-middleware. Setelah ini, ekstensi redux-devtools memungkinkan penyimpanan debugging dalam mode perjalanan waktu.

 import { applyMiddleware, createStore } from "redux"; import thunk from "redux-thunk"; import promise from "redux-promise-middleware"; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); export default createStore(rootReducer, middleware); 

// src / index.js

 ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

Di MobX, beberapa toko disiapkan. Tidak perlu pustaka eksternal untuk menangani tindakan async tetapi hanya beberapa baris kode. Anda memerlukan mobx-remotedev untuk menghubungkan alat debugging redux-devtools-extension.

 import remotedev from 'mobx-remotedev'; import Store from './store'; const contactConfig = { name:'Contact Store', global: true, onlyActions:true, filters: { whitelist: /fetch|update|create|Event|entity|entities|handleErrors/ } }; const contactStore = new Store('api/contacts'); const allStores = { contactStore: remotedev(contactStore, contactConfig) }; export default allStores; 

// src / index.js

 ReactDOM.render( <BrowserRouter> <Provider stores={allStores}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

Namun jumlah kode yang digunakan keduanya sama. Tapi, MobX mengandung lebih sedikit pernyataan impor.

Menentukan tindakan & reduksi

Tindakan & reduksi didefinisikan di Redux dengan kode berikut:

// tindakan

 export function fetchContacts(){ return dispatch => { dispatch({ type: 'FETCH_CONTACTS', payload: client.get(url) }) } } 

// reduksi

 switch (action.type) { case 'FETCH_CONTACTS_FULFILLED': { return { ...state, contacts: action.payload.data.data || action.payload.data, loading: false, errors: {} } } case 'FETCH_CONTACTS_PENDING': { return { ...state, loading: true, errors: {} } } case 'FETCH_CONTACTS_REJECTED': { return { ...state, loading: false, errors: { global: action.payload.message } } } } 

Logika untuk aksi & peredam dilakukan dalam satu kelas di MobX. Ia menggunakan OOP yang dengannya kelas Store dire-refactored untuk membuat beberapa toko menggunakan konstruktor kelas. Kode masing-masing ditunjukkan di bawah ini:

 @action fetchAll = async() => { this.loading = true; this.errors = {}; try { const response = await this.service.find({}) runInAction('entities fetched', () => { this.entities = response.data; this.loading = false; }); } catch(err) { this.handleErrors(err); } } 

Jadi, kita telah melihat bahwa logika yang didefinisikan dalam kedua solusi manajemen negara melakukan pekerjaan yang sama. Satu-satunya perbedaan adalah bahwa kami telah menggunakan 33 baris kode di Redux dan 14 baris kode di MobX untuk mencapai hasil. Karenanya, Anda dapat membangun aplikasi lebih cepat dengan MobX.

Mengapa menggunakan MobX untuk Bereaksi aplikasi?

MobX adalah pustaka teruji yang membuat manajemen negara menjadi sederhana & dapat diskalakan dengan menerapkan pemrograman reaktif fungsional (TFRP) secara transparan. Bereaksi dan MobX adalah kombinasi yang kuat bersama.

• Lebih sedikit kode untuk ditulis
• Mudah dipelajari
• Data bersarang mudah
• Dukungan untuk pemrograman berorientasi objek

Mengapa tidak menggunakan MobX?

• Sulit di-debug
• Alternatif yang lebih baik hadir
• Memberikan terlalu banyak kebebasan

Mengapa menggunakan Redux untuk Bereaksi aplikasi?

Redux adalah perpustakaan mandiri yang dapat digunakan dengan kerangka kerja UI termasuk Angular, Vue, Ember, React & vanilla JS.

• Ekstensibilitas melalui middlewares
• Popularitas & komunitas
• Dukungan perkakas
• Prediktabilitas & kesederhanaan
• Aliran data searah & kekekalan
• Pemisahan data & presentasi

Mengapa tidak menggunakan Redux?

• Pelat boiler (pengecil, penyeleksi, tampilan, jenis tindakan, pembuat tindakan, ...)
• Tindakan terputus dari efeknya (sebagaimana didefinisikan dalam peredam)
• Tidak ada solusi out-of-the-box untuk menangani efek samping (tersedia melalui middlewares seperti redux-thunk atau redux-saga)

Catatan Akhir:

Sekarang, Anda dapat melihat bahwa basis kode MobX jauh lebih gesit. Menggunakan gaya OOP dan praktik pengembangan yang baik, Anda dapat dengan cepat membuat aplikasi Bereaksi. Kerugian utama adalah sangat mudah untuk menulis kode yang buruk dan tidak mungkin untuk mempertahankannya.

Di sisi lain, Redux populer dan cocok untuk membangun proyek besar & kompleks. Ini adalah kerangka kerja yang ketat dengan perlindungan yang memastikan bahwa setiap pengembang menulis kode yang mudah diuji dan dipelihara. Namun, ini tidak cocok untuk proyek kecil.

Saya harap saya telah memberikan informasi yang cukup untuk mengklarifikasi apakah akan bermigrasi ke MobX atau melanjutkan dengan Redux. Pada akhirnya, keputusan tergantung pada jenis proyek yang sedang Anda kerjakan dan sumber daya yang tersedia untuk Anda.