Redux vs Mobx: Mana yang terbaik untuk projek anda?

Takeaways Key

Kedua-dua Redux dan Mobx adalah perpustakaan sumber terbuka yang menyediakan pengurusan negara-negara, debugging perjalanan masa sokongan, dan mempunyai sokongan yang luas untuk rangka kerja React/React Native. Walau bagaimanapun, mereka berbeza dalam falsafah dan pendekatan teras mereka.
Mobx mudah dipelajari dan digunakan, memerlukan kurang kod untuk menulis, menyokong sepenuhnya pengaturcaraan berorientasikan objek, dan membuat berurusan dengan data bersarang mudah. Walau bagaimanapun, ia memberikan kebebasan yang terlalu banyak yang boleh membawa kepada kod yang tidak dapat dipastikan, sukar untuk debug, dan mungkin ada alternatif yang lebih baik untuknya pada masa akan datang.
Redux lebih popular dan sesuai untuk membina projek-projek yang besar dan kompleks kerana garis panduan yang ketat mengenai penulisan kod negara, menjadikannya mudah untuk menulis ujian dan membangunkan kod yang dapat dipelihara. Walau bagaimanapun, ia memerlukan lebih banyak kod boilerplate dan tidak sesuai untuk projek kecil.
Perbandingan kod antara Redux dan Mobx menunjukkan bahawa pangkalan kod Mobx lebih leaner dan dapat membantu membina aplikasi lebih cepat. Walau bagaimanapun, sangat mudah untuk menulis kod miskin dan tidak dapat dipertahankan dengan MOBX.
Keputusan mengenai sama ada menggunakan Redux atau Mobx bergantung kepada jenis projek yang sedang anda kerjakan, dan sumber yang tersedia untuk anda.

Untuk banyak pemaju JavaScript, aduan terbesar dengan Redux adalah jumlah kod boilerplate yang diperlukan untuk melaksanakan ciri -ciri. Alternatif yang lebih baik adalah Mobx yang menyediakan fungsi yang sama tetapi dengan kod yang lebih rendah untuk menulis.

Untuk Mobx Newbies, lihatlah dengan cepat pengenalan ini yang ditulis oleh Pencipta Mobx. Anda juga boleh bekerja melalui tutorial ini untuk mendapatkan pengalaman praktikal.

Matlamat artikel ini adalah untuk membantu pemaju JavaScript menentukan mana dari kedua -dua penyelesaian pengurusan negeri ini adalah yang terbaik untuk projek mereka. Saya telah memindahkan projek Crud Redux ini untuk digunakan sebagai contoh dalam artikel ini. Saya akan terlebih dahulu membincangkan kebaikan dan keburukan menggunakan Mobx, dan kemudian saya akan menunjukkan sampel kod sebenar dari kedua -dua versi untuk menunjukkan perbezaan.

Kod untuk projek -projek yang disebutkan dalam artikel ini boleh didapati di GitHub:

Redux crud Contoh
Contoh CRUD Mobx

Jika anda menikmati siaran ini, anda mungkin juga ingin mendaftar untuk SitePoint Premium dan menonton kursus kami untuk bekerja dengan borang menggunakan React dan Redux.

Apa persamaan redux dan mobx?

Pertama, mari kita lihat apa yang mereka berdua mempunyai persamaan. Mereka:

adalah perpustakaan sumber terbuka

• Menyediakan Pengurusan Negeri sisi pelanggan
• debugging perjalanan masa sokongan melalui redux-devtools-extension
• tidak terikat dengan rangka kerja tertentu
• Mempunyai sokongan yang luas untuk Rangka Rangka React/React Native.
4 alasan untuk menggunakan Mobx

mari kita lihat perbezaan utama antara Redux dan Mobx.

1. Mudah untuk dipelajari dan digunakan

Untuk pemula, anda boleh belajar cara menggunakan MOBX dalam masa 30 minit. Sebaik sahaja anda mempelajari asas -asas, itu sahaja. Anda tidak perlu belajar apa -apa yang baru. Dengan Redux, asas -asasnya juga mudah. Walau bagaimanapun, sebaik sahaja anda mula membina aplikasi yang lebih kompleks, anda perlu berurusan dengan:

• mengendalikan tindakan async dengan redux-thunk
• memudahkan kod anda dengan redux-saga
• Mendefinisikan pemilih untuk mengendalikan nilai yang dikira, dan lain -lain

Dengan Mobx, semua situasi ini "ajaib" dijaga. Anda tidak memerlukan perpustakaan tambahan untuk mengendalikan situasi sedemikian.

2. Kurang kod untuk menulis

Untuk melaksanakan ciri di Redux, anda perlu mengemas kini sekurang -kurangnya empat artifak. Ini termasuk kod menulis untuk pengurangan, tindakan, bekas dan komponen. Ini amat menjengkelkan jika anda bekerja pada projek kecil. Mobx hanya memerlukan anda untuk mengemas kini sekurang -kurangnya dua artifak (iaitu kedai dan komponen paparan).

3. Sokongan penuh untuk pengaturcaraan berorientasikan objek

Jika anda lebih suka menulis kod berorientasikan objek, anda akan gembira mengetahui anda boleh menggunakan OOP untuk melaksanakan logik pengurusan negeri dengan MOBX. Melalui penggunaan penghias seperti @Observable dan @observer, anda boleh membuat komponen JavaScript biasa anda dan menyimpan reaktif. Jika anda lebih suka pengaturcaraan berfungsi, tidak ada masalah - itu juga disokong. Redux, sebaliknya, sangat ditujukan kepada prinsip -prinsip pengaturcaraan berfungsi. Walau bagaimanapun, anda boleh menggunakan perpustakaan redux-connect-decorator jika anda mahukan pendekatan berasaskan kelas.

4. Berurusan dengan data bersarang adalah mudah

Dalam kebanyakan aplikasi JavaScript, anda akan mendapati diri anda bekerja dengan data relasi atau bersarang. Untuk dapat menggunakannya di kedai Redux, anda perlu menormalkannya terlebih dahulu. Seterusnya, anda perlu menulis lebih banyak kod untuk menguruskan penjejakan rujukan dalam data yang dinormalisasi.

Di MOBX, disyorkan untuk menyimpan data anda dalam bentuk denormalized. MOBX boleh menjejaki hubungan untuk anda, dan secara automatik akan membuat perubahan semula. Dengan menggunakan objek domain untuk menyimpan data anda, anda boleh merujuk terus ke objek domain lain yang ditakrifkan di kedai lain. Di samping itu, anda boleh menggunakan (@) penghias dan pengubah yang dikira untuk diperhatikan dengan mudah menyelesaikan cabaran data yang kompleks.

3 alasan untuk tidak menggunakan Mobx

1. Terlalu banyak kebebasan

Redux adalah rangka kerja yang menyediakan garis panduan yang ketat mengenai cara anda menulis kod negeri. Ini bermakna anda boleh dengan mudah menulis ujian dan membangunkan kod yang boleh dipelihara. Mobx adalah perpustakaan dan tidak mempunyai peraturan bagaimana untuk melaksanakannya. Bahaya dengan ini adalah sangat mudah untuk mengambil jalan pintas dan memohon perbaikan cepat yang boleh membawa kepada kod yang tidak dapat dipastikan.

2. Sukar untuk debug

kod dalaman Mobx "ajaib" mengendalikan banyak logik untuk membuat aplikasi anda reaktif. Terdapat kawasan yang tidak kelihatan di mana data anda berlalu di antara kedai dan komponen anda, yang menjadikannya sukar untuk debug apabila anda mempunyai masalah. Jika anda menukar keadaan secara langsung dalam komponen, tanpa menggunakan @Actions, anda akan mempunyai masa yang sukar untuk menunjuk sumber bug.

3. Mungkin ada alternatif yang lebih baik untuk Mobx

Dalam pembangunan perisian, trend baru muncul muncul sepanjang masa. Dalam beberapa tahun yang singkat, teknik perisian semasa dapat dengan cepat kehilangan momentum. Pada masa ini, terdapat beberapa penyelesaian yang bersaing dengan Redux dan Mobx. Beberapa contoh ialah Relay/Apollo & Graphql, Alt.js dan Jumpsuit. Mana -mana teknologi ini berpotensi untuk menjadi yang paling popular. Jika anda benar -benar ingin tahu mana yang terbaik untuk anda, anda perlu mencuba semuanya.

perbandingan kod: redux vs mobx

Teori yang cukup, mari kita lihat kod. Pertama, kita membandingkan bagaimana setiap versi bootstrapping.

bootstrapping

versi redux: Di Redux, kami mula -mula menentukan kedai kami dan kemudian kami menyampaikannya ke aplikasi melalui pembekal. Kami juga perlu menentukan redux-thunk dan redux-promise-middleware untuk mengendalikan fungsi asynchronous. Redux-devtools-extension membolehkan kami debug kedai kami dalam mod perjalanan masa.

<span>// src/store.js
</span><span>import <span>{ applyMiddleware, createStore }</span> from "redux";
</span><span>import thunk from "redux-thunk";
</span><span>import promise from "redux-promise-middleware";
</span><span>import <span>{ composeWithDevTools }</span> from 'redux-devtools-extension';
</span><span>import rootReducer from "./reducers";
</span>
<span>const middleware = composeWithDevTools(applyMiddleware(promise(), thunk));
</span>
<span>export default createStore(rootReducer, middleware);
</span>
<span>-------------------------------------------------------------------------------
</span>
<span>// src/index.js
</span>…
<span>ReactDOM.render(
</span>  <span><span><span><BrowserRouter</span>></span>
</span><span>    <span><span><Provider</span> store<span>={store}</span>></span>
</span><span>      <span><span><App</span> /></span>
</span><span>    <span><span></Provider</span>></span>
</span><span>  <span><span></BrowserRouter</span>></span>,
</span>  <span>document.getElementById('root')
</span><span>);
</span>

versi Mobx: Di Mobx, kita perlu menyediakan pelbagai kedai. Dalam kes ini, saya hanya menggunakan satu kedai, yang saya letakkan dalam koleksi bernama Allstores. Pembekal kemudian digunakan untuk lulus koleksi kedai ke aplikasi.

Seperti yang disebutkan sebelumnya, MOBX tidak memerlukan perpustakaan luaran untuk mengendalikan tindakan async, oleh itu garis yang lebih sedikit. Walau bagaimanapun, kami memerlukan Mobx-Remotedev untuk menyambung ke alat debugging redux-devtools-extension.

<span>// src/stores/index.js
</span><span>import remotedev from 'mobx-remotedev';
</span><span>import <span>Store</span> from './store';
</span>
<span>const contactConfig = {
</span>  <span>name:'Contact Store',
</span>  <span>global: true,
</span>  <span>onlyActions:true,
</span>  <span>filters: {
</span>    <span>whitelist: <span>/fetch<span>|update|create|Event|entity|entities|handleErrors</span>/</span>
</span>  <span>}
</span><span>};
</span>
<span>const contactStore = new Store('api/contacts');
</span>
<span>const allStores = {
</span>  <span>contactStore: remotedev(contactStore, contactConfig)
</span><span>};
</span>
<span>export default allStores;
</span>
<span>-------------------------------------------------------------------------------
</span>
<span>// src/index.js
</span>…
<span>ReactDOM.render(
</span>  <span><span><span><BrowserRouter</span>></span>
</span><span>    <span><span><Provider</span> stores<span>={allStores}</span>></span>
</span><span>      <span><span><App</span> /></span>
</span><span>    <span><span></Provider</span>></span>
</span><span>  <span><span></BrowserRouter</span>></span>,
</span>  <span>document.getElementById('root')
</span><span>);
</span>

Jumlah kod di sini adalah kira -kira sama dalam kedua -dua versi. MOBX mempunyai penyata import yang lebih sedikit walaupun.

suntikan props

versi redux: Di Redux, keadaan dan tindakan diluluskan kepada alat peraga menggunakan fungsi Connect () React-Redux.

<span>// src/pages/contact-form-page.js
</span>…
  <span>// accessing props
</span>  <span><span><span><ContactForm</span>
</span></span><span>    <span>contact<span>={this.props.contact}</span>
</span></span><span>    <span>loading<span>={this.props.loading}</span>
</span></span><span>    <span>onSubmit<span>={this.submit}</span>
</span></span><span>  <span>/></span>
</span>…

<span>// function for injecting state into props
</span><span>function mapStateToProps(state) {
</span>  <span>return {
</span>    <span>contact: state.contactStore.contact,
</span>    <span>errors: state.contactStore.errors
</span>  <span>}
</span><span>}
</span>
<span>// injecting both state and actions into props
</span><span>export default connect(mapStateToProps, { newContact,
</span>  saveContact<span>,
</span>  fetchContact<span>,
</span>  updateContact
<span>})(ContactFormPage);
</span>

versi Mobx: Di Mobx, kami hanya menyuntik koleksi kedai. Kami menggunakan @Enject di bahagian atas bekas atau kelas komponen untuk melakukan ini. Ini menjadikan kedai -kedai tersedia dalam alat peraga, yang seterusnya membolehkan kami mengakses kedai tertentu dan menyampaikannya kepada komponen kanak -kanak. Kedua -dua negeri dan tindakan diakses melalui sifat -sifat di objek kedai sehingga tidak perlu menyampaikannya secara berasingan seperti kes di Redux.

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

Versi Mobx nampaknya lebih mudah dibaca. Walau bagaimanapun, kita boleh menggunakan redux-connect-decorators untuk memudahkan kod redux. Dalam kes itu, tidak akan ada pemenang yang jelas.

Menentukan kedai, tindakan, dan pengurangan

Untuk memastikan artikel ini bersandar, saya akan menunjukkan sampel kod untuk hanya satu tindakan.

versi redux: Di Redux, kita perlu menentukan tindakan dan pengurangan.

<span>// src/store.js
</span><span>import <span>{ applyMiddleware, createStore }</span> from "redux";
</span><span>import thunk from "redux-thunk";
</span><span>import promise from "redux-promise-middleware";
</span><span>import <span>{ composeWithDevTools }</span> from 'redux-devtools-extension';
</span><span>import rootReducer from "./reducers";
</span>
<span>const middleware = composeWithDevTools(applyMiddleware(promise(), thunk));
</span>
<span>export default createStore(rootReducer, middleware);
</span>
<span>-------------------------------------------------------------------------------
</span>
<span>// src/index.js
</span>…
<span>ReactDOM.render(
</span>  <span><span><span><BrowserRouter</span>></span>
</span><span>    <span><span><Provider</span> store<span>={store}</span>></span>
</span><span>      <span><span><App</span> /></span>
</span><span>    <span><span></Provider</span>></span>
</span><span>  <span><span></BrowserRouter</span>></span>,
</span>  <span>document.getElementById('root')
</span><span>);
</span>

versi Mobx: Di Mobx, logik untuk tindakan dan pengurangan dilakukan dalam satu kelas. Saya telah menentukan tindakan async yang memanggil entiti tindakan lain yang diambil selepas respons telah diterima.

Sejak Mobx menggunakan gaya OOP, kelas kedai yang ditakrifkan di sini telah refactored untuk membolehkan penciptaan mudah pelbagai kedai menggunakan pembina kelas. Oleh itu, kod yang ditunjukkan di sini adalah kod asas yang tidak terikat dengan kedai domain tertentu.

<span>// src/stores/index.js
</span><span>import remotedev from 'mobx-remotedev';
</span><span>import <span>Store</span> from './store';
</span>
<span>const contactConfig = {
</span>  <span>name:'Contact Store',
</span>  <span>global: true,
</span>  <span>onlyActions:true,
</span>  <span>filters: {
</span>    <span>whitelist: <span>/fetch<span>|update|create|Event|entity|entities|handleErrors</span>/</span>
</span>  <span>}
</span><span>};
</span>
<span>const contactStore = new Store('api/contacts');
</span>
<span>const allStores = {
</span>  <span>contactStore: remotedev(contactStore, contactConfig)
</span><span>};
</span>
<span>export default allStores;
</span>
<span>-------------------------------------------------------------------------------
</span>
<span>// src/index.js
</span>…
<span>ReactDOM.render(
</span>  <span><span><span><BrowserRouter</span>></span>
</span><span>    <span><span><Provider</span> stores<span>={allStores}</span>></span>
</span><span>      <span><span><App</span> /></span>
</span><span>    <span><span></Provider</span>></span>
</span><span>  <span><span></BrowserRouter</span>></span>,
</span>  <span>document.getElementById('root')
</span><span>);
</span>

percayalah atau tidak, logik yang ditakrifkan dalam kedua -dua versi melakukan tugas yang sama, iaitu:

• Kemas kini keadaan pemuatan UI
• Ambil data secara asynchronously
• Menangkap pengecualian dan kemas kini keadaan.

Di Redux, kami telah menggunakan 33 baris kod. Di Mobx, kami telah menggunakan kira -kira 14 baris kod untuk mencapai hasil yang sama! Manfaat utama versi MOBX ialah anda boleh menggunakan semula kod asas di hampir semua kelas kedai domain dengan sedikit atau tiada pengubahsuaian. Ini bermakna anda boleh membina aplikasi anda dengan lebih cepat.

Perbezaan lain

Untuk membuat borang di Redux, saya telah menggunakan bentuk redux. Di MOBX, saya telah menggunakan bentuk Mobx-react. Kedua -dua perpustakaan matang dan membantu anda mengendalikan logik bentuk dengan mudah. Secara peribadi, saya lebih suka bentuk Mobx-react, kerana ia membolehkan anda mengesahkan medan melalui plugin. Dengan bentuk redux, anda sama ada menulis kod pengesahan anda sendiri atau anda boleh mengimport pakej pengesahan untuk mengendalikan pengesahan untuk anda.

Satu kelemahan kecil dengan MOBX adalah bahawa anda tidak boleh mengakses fungsi tertentu secara langsung dalam objek yang dapat dilihat kerana mereka tidak benar -benar objek JavaScript. Nasib baik, mereka telah menyediakan fungsi TOJS () yang boleh anda gunakan untuk menukar objek yang boleh dilihat ke objek JavaScript biasa.

Kesimpulan

Jelas, anda dapat melihat bahawa asas kod Mobx jauh lebih leaner. Menggunakan gaya OOP dan amalan pembangunan yang baik, anda boleh membina aplikasi dengan cepat. Kelemahan utama adalah bahawa sangat mudah untuk menulis kod miskin dan tidak dapat dipertahankan.

Redux, sebaliknya, lebih popular dan sesuai untuk membina projek yang besar dan kompleks. Ia adalah rangka kerja yang ketat dengan perlindungan yang memastikan setiap pemaju menulis kod yang mudah diuji dan dikekalkan. Walau bagaimanapun, ia tidak sesuai dengan projek kecil.

Walaupun kelemahan Mobx, anda masih boleh membina projek besar jika anda mengikuti amalan yang baik. Dalam kata -kata Albert Einstein, "Buat segala -galanya mudah, tetapi tidak lebih mudah".

Saya harap saya telah memberikan maklumat yang cukup untuk membuat kes yang jelas sama ada untuk berhijrah ke Mobx atau melekat dengan Redux. Akhirnya, keputusan bergantung kepada jenis projek yang sedang anda kerjakan, dan sumber -sumber yang tersedia untuk anda.

Memuatkan pemain ...

Soalan Lazim (Soalan Lazim) di Redux vs Mobx

Apakah perbezaan utama antara Redux dan Mobx? Redux mengikuti corak pengurusan negeri yang ketat dan boleh diramal berdasarkan seni bina fluks. Ia mempunyai satu kedai, dan perubahan keadaan dibuat melalui tindakan dan pengurangan. Sebaliknya, Mobx mengamalkan pendekatan yang lebih fleksibel dan intuitif. Ia membolehkan pelbagai kedai dan perubahan keadaan dibuat secara langsung melalui tindakan. Pengurusan Negeri yang telus. Corak tindakan dan pengurangan yang ketat menjadikannya lebih mudah untuk mengesan perubahan keadaan, yang boleh menjadi penting dalam aplikasi yang kompleks. Walau bagaimanapun, MOBX, dengan pendekatan yang lebih fleksibel, juga boleh digunakan dengan berkesan dalam aplikasi berskala besar, terutamanya apabila pemaju lebih suka gaya pengekodan yang kurang boilerplate dan lebih mudah. ?

Redux mempunyai lengkung pembelajaran yang lebih curam berbanding dengan Mobx. Ia memerlukan pemahaman konsep tindakan, pengurangan, dan kedai, dan bagaimana mereka berinteraksi antara satu sama lain. Sebaliknya, MOBX biasanya dianggap lebih mudah untuk memahami kerana ia menggunakan konsep pengaturcaraan yang lebih biasa seperti pemerhatian dan tindakan, dan ia memerlukan kurang kod boilerplate.

Redux memerlukan middleware seperti redux-thunk atau redux-saga untuk mengendalikan tindakan tak segerak. Middleware ini membolehkan tindakan menghantar tindakan lain, atau untuk melambatkan penghantaran tindakan. Mobx, sebaliknya, boleh mengendalikan tindakan tak segerak secara langsung tanpa memerlukan middleware tambahan. digunakan bersama dalam satu aplikasi. Walau bagaimanapun, ini tidak biasa dilakukan kerana ia boleh menyebabkan kerumitan yang tidak perlu. Secara amnya disyorkan untuk memilih satu atau yang lain berdasarkan keperluan khusus dan kekangan projek anda. ujian. Perubahan keadaan yang boleh diramal dan fungsi tulen (pengurangan) menjadikannya mudah untuk diuji. Mobx, walaupun tidak semudah untuk menguji kerana sifatnya yang lebih dinamik, masih boleh diuji dengan berkesan menggunakan alat seperti Jest.

Bagaimanakah prestasi dibandingkan antara Redux dan Mobx? Walau bagaimanapun, MOBX boleh mempunyai kelebihan dalam senario tertentu kerana sistem pemerhatian yang halus, yang hanya mengemas kini komponen yang secara langsung dipengaruhi oleh perubahan keadaan. ?

Redux mempunyai komuniti yang lebih besar dan ekosistem yang lebih matang berbanding dengan MOBX. Terdapat lebih banyak sumber yang tersedia untuk pembelajaran Redux, dan lebih banyak perpustakaan pihak ketiga yang direka untuk bekerja dengannya. Walau bagaimanapun, Mobx telah mendapat populariti dan komuniti berkembang. Lebih suka gaya pengekodan boilerplate yang lebih mudah dan kurang, atau apabila projek memerlukan kawalan halus ke atas kemas kini negeri. Ia juga merupakan pilihan yang baik apabila pasukan lebih selesa dengan konsep pengaturcaraan berorientasikan objek, kerana Mobx memanfaatkannya. > Redux mungkin pilihan yang lebih baik untuk aplikasi berskala besar di mana kebolehprediksi dan ketelusan perubahan keadaan adalah penting. Ia juga merupakan pilihan yang baik apabila pasukan itu selesa dengan konsep pengaturcaraan berfungsi, kerana Redux memanfaatkannya. Di samping itu, ekosistem matang Redux dan komuniti besar boleh menjadi faktor penentu.

Atas ialah kandungan terperinci Redux vs Mobx: Mana yang terbaik untuk projek anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!