Alat Manajemen React State Terbaik untuk Aplikasi Perusahaan

Pengembang aplikasi React tingkat perusahaan tahu betapa pentingnya manajemen status untuk pengalaman pengguna akhir yang koheren.

Namun, pengguna bukan satu-satunya yang terpengaruh oleh manajemen negara. Pengembang Bereaksi membuat dan memelihara status. Mereka ingin pengelolaan negara menjadi sederhana, dapat diperluas, dan atomik. React telah bergerak ke arah ini dengan memperkenalkan kait.

Masalah mungkin muncul ketika negara harus dibagi di antara banyak komponen. Insinyur harus menemukan alat dan pustaka yang sesuai dengan kebutuhan mereka, namun pada saat yang sama memenuhi standar tinggi yang diperlukan untuk aplikasi tingkat perusahaan.

Dalam artikel ini, saya akan menganalisis dan membandingkan perpustakaan paling populer dan memilih yang paling tepat untuk manajemen negara dalam aplikasi tingkat perusahaan.

Kemampuan Manajemen React State bawaan

React memiliki alat yang sangat baik untuk menyediakan data di beberapa komponen. Tujuan utama Context adalah untuk menghindari prop-drilling. Tujuan kami adalah untuk mendapatkan alat yang mudah digunakan untuk mengelola keadaan dalam berbagai skenario yang mungkin ditemui dalam aplikasi perusahaan: pembaruan yang sering, desain ulang, pengenalan fitur baru, dan sebagainya.

Meskipun semua ini secara teoritis dapat dilakukan dengan Konteks, itu akan membutuhkan solusi khusus yang memerlukan waktu untuk menyiapkan, mendukung, dan mengoptimalkan. Satu-satunya keuntungan dari Context adalah tidak bergantung pada perpustakaan pihak ketiga, tetapi itu tidak dapat melebihi upaya untuk mempertahankan pendekatan ini.

Selain itu, anggota tim React Sebastian Markbage telah menyebutkan bahwa API Konteks baru tidak dibuat dan dioptimalkan untuk pembaruan frekuensi tinggi melainkan untuk pembaruan frekuensi rendah seperti pembaruan tema dan manajemen otentikasi.

Meneliti Perpustakaan yang Ada

Ada lusinan alat manajemen status di GitHub (misalnya, Redux, MobX, Akita, Recoil, dan Zustand). Namun, mempertimbangkan masing-masing dari mereka akan mengarah pada penelitian dan perbandingan tanpa akhir. Itu sebabnya saya mempersempit pilihan saya menjadi tiga pesaing utama berdasarkan popularitas , penggunaan , dan pemelihara mereka.

Untuk memperjelas perbandingan, saya akan menggunakan atribut kualitas berikut:

• Kegunaan
• Pemeliharaan
• Pertunjukan
• Kemampuan untuk diuji
• Skalabilitas (berfungsi dengan kinerja yang sama di negara bagian yang lebih besar)
• Kemampuan untuk dimodifikasi
• Dapat digunakan kembali
• Ekosistem (memiliki berbagai alat bantu untuk memperluas fungsionalitas)
• Komunitas (memiliki banyak pengguna dan pertanyaan mereka dijawab di web)
• Portabilitas (dapat digunakan dengan library/framework selain React)

redux

Redux adalah wadah negara yang dibuat pada tahun 2015. Ini menjadi sangat populer karena:

• Tidak ada alternatif serius saat diluncurkan.
• Ini memberikan pemisahan antara negara dan tindakan.
• react-redux magic mengaktifkan koneksi status langsung.
• Co-pencipta perpustakaan adalah pengembang Facebook yang diakui dan anggota tim inti React Dan Abramov.

Anda memiliki penyimpanan global tempat data Anda berada. Kapan pun Anda perlu memperbarui toko, Anda mengirimkan tindakan yang mengarah ke peredam . Bergantung pada jenis tindakan, peredam memperbarui status dengan cara yang tidak dapat diubah.

Untuk menggunakan Redux dengan React, Anda harus berlangganan komponen ke pembaruan toko melalui react-redux .

Contoh Redux API

Bagian mendasar dari Redux dalam basis kode yang membedakannya dari alat lain adalah irisan. Mereka berisi semua logika tindakan dan reduksi.

KodeSandbox

 // slices/counter.js import { createSlice } from "@reduxjs/toolkit"; export const slice = createSlice({ name: "counter", initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; } } }); export const actions = slice.actions; export const reducer = slice.reducer; // store.js import { configureStore } from "@reduxjs/toolkit"; import { reducer as counterReducer } from "./slices/counter"; export default configureStore({ reducer: { counter: counterReducer } }); // index.js import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import App from './App' import store from './store' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) // App.js import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { actions } from "./slices/counter"; const App = () => { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return ( <div> <div> <button onClick={() => dispatch(actions.increment())}>Increment</button> <span>{count}</span> <button onClick={() => dispatch(actions.decrement())}>Decrement</button> </div> </div> ); }; export default App;

Atribut Kualitas

• Kegunaan . Redux menjadi sangat sederhana dengan diperkenalkannya paket toolkit resmi. Anda membuat irisan (kombinasi status awal, reduksi, dan tindakan), meneruskannya ke penyimpanan, dan mengaksesnya dalam komponen melalui kait.
• Pemeliharaan . Redux itu sederhana. Tidak memerlukan pengetahuan yang mendalam untuk memahami bagaimana meningkatkan atau memperbaiki sesuatu.
• Kinerja . Influencer kinerja utama dengan Redux adalah insinyur perangkat lunak. Redux adalah alat sederhana tanpa banyak logika. Jika Anda melihat bahwa pembaruan status lambat, Anda dapat mengikuti panduan resmi untuk membuatnya lebih cepat.
• Kemampuan untuk diuji . Redux terdiri dari fungsi murni (tindakan dan reduksi), membuatnya bagus untuk pengujian unit. Ini juga menyediakan mekanisme untuk menulis tes integrasi di mana penyimpanan, tindakan, dan reduksi bekerja bersama.
• Skalabilitas . Secara default, Redux memiliki satu status global, sehingga sulit untuk diskalakan. Namun, ada pustaka redux-dynamic-modules yang memungkinkan pembuatan reduksi modular dan middleware.
• Kemampuan untuk dimodifikasi . Menyesuaikan Redux adalah urusan yang mudah karena mendukung middleware.
• Dapat digunakan kembali . Redux adalah kerangka kerja-agnostik, sehingga sangat baik dalam penggunaan kembali.
• ekosistem . Redux menawarkan ekosistem raksasa dari add-on, perpustakaan, dan alat yang bermanfaat.
• Komunitas . Redux, perpustakaan manajemen negara bagian tertua dalam perbandingan kami, telah mengumpulkan komunitas besar dengan basis pengetahuan yang signifikan. Ada ~30.000 (~19.000 dijawab) pertanyaan dengan tag redux di Stack Overflow.
• pulsa . Redux diperbarui dan dipelihara secara teratur.

MobX

MobX adalah perpustakaan lain yang relatif lama dengan 23.000 bintang di GitHub. Apa yang membedakannya dari Redux adalah ia mengikuti paradigma OOP dan menggunakan yang dapat diamati. MobX dibuat oleh Michel Weststrate dan saat ini dikelola oleh sekelompok penggemar open-source dengan bantuan Mendix yang berbasis di Boston.

Di MobX, Anda membuat kelas JavaScript dengan panggilan makeObservable di dalam konstruktor yang merupakan toko observable Anda (Anda dapat menggunakan dekorator @observable jika Anda memiliki loader yang sesuai). Kemudian Anda mendeklarasikan properti (status) dan metode ( tindakan dan nilai yang dihitung ) dari kelas. Komponen berlangganan ke penyimpanan yang dapat diamati ini untuk mengakses status, nilai yang dihitung, dan tindakan.

Fitur penting lain dari MobX adalah mutabilitas. Ini memungkinkan memperbarui status secara diam-diam jika Anda ingin menghindari efek samping.

Contoh API MobX

Fitur unik MobX adalah Anda membuat kelas ES6 yang hampir murni dengan semua keajaiban yang tersembunyi di balik kap mesin. Ini membutuhkan lebih sedikit kode khusus perpustakaan untuk menjaga konsentrasi pada logika.

KodeSandbox

 // stores/counter.js import { makeAutoObservable } from "mobx"; class CounterStore { value = 0; constructor() { makeAutoObservable(this); } increment() { this.value += 1; } decrement() { this.value -= 1; } } export default CounterStore; // index.js import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "mobx-react"; import App from "./App"; import CounterStore from "./stores/counter"; ReactDOM.render( <Provider counter={new CounterStore()}> <App /> </Provider>, document.getElementById("root") ); // App.js import React from "react"; import { inject, observer } from "mobx-react"; const App = inject((stores) => ({ counter: stores.counter }))( observer(({ counter }) => { return ( <div> <div> <button onClick={() => counter.increment()}>Increment</button> <span>{counter.value}</span> <button onClick={() => counter.decrement()}>Decrement</button> </div> </div> ); }) ); export default App;

Atribut Kualitas

• Kegunaan . Toko yang dapat diamati adalah titik masuk tunggal untuk manajemen negara bagian. Itu membuat penggunaan MobX menjadi sederhana karena Anda memiliki satu-satunya tempat untuk memodifikasi.
• Pemeliharaan . Ini adalah kerugian yang cukup besar. Tanpa pengetahuan tentang RxJS API, Anda tidak akan dapat mencapai hasil yang diinginkan. Menggunakan MobX dalam tim yang berkualifikasi buruk dapat menyebabkan masalah inkonsistensi status.
• Kinerja . MobX terdiri dari toko independen dan memungkinkan Anda untuk berlangganan satu-satunya yang Anda butuhkan. Ini sangat efektif.
• Kemampuan untuk diuji . Toko yang dapat diamati adalah objek JavaScript biasa dengan fungsi reaktif yang tersembunyi di dalamnya. Pengujian sama seperti untuk kelas JavaScript lainnya.
• Skalabilitas . Toko yang dapat diamati dibagi secara logis; tidak ada kesulitan dalam menskalakan MobX.
• Kemampuan untuk dimodifikasi . MobX memungkinkan pembuatan kustom yang dapat diamati dengan perilaku yang dimodifikasi. Selain itu, ada konsep yang disebut reaksi. Reaksi model efek samping otomatis. Hal-hal ini membuat MobX sangat dapat disesuaikan.
• Dapat digunakan kembali . MobX adalah agnostik dari kerangka kerja, sehingga sangat baik dalam penggunaan kembali.
• ekosistem . Ada ratusan ekstensi yang tersedia untuk MobX.
• Komunitas . MobX memiliki banyak penggemar setia. Ada ~1.600 (~1.000 dijawab) pertanyaan dengan tag mobx di Stack Overflow.
• pulsa . MobX diperbarui dan dipelihara secara teratur.

Mundur

Recoil adalah pendatang baru, gagasan terbaru dari tim React. Ide dasar di baliknya adalah implementasi sederhana dari fitur React yang hilang seperti status bersama dan data turunan.

Anda mungkin bertanya-tanya mengapa perpustakaan eksperimental ditinjau untuk proyek tingkat perusahaan. Pertama-tama, Recoil adalah salah satu topik yang paling banyak dibicarakan di komunitas React saat ini. Kedua, Recoil didukung oleh Facebook dan sudah digunakan di beberapa aplikasinya, yang berarti akan menjadi versi stabil di beberapa titik. Akhirnya, ini adalah pendekatan yang sama sekali baru untuk berbagi status di React, dan saya yakin bahwa meskipun Recoil tidak digunakan lagi, akan ada alat lain yang mengikuti jalur yang sama.

Recoil dibangun di atas dua istilah: atom dan pemilih . Atom adalah bagian keadaan bersama. Sebuah komponen dapat berlangganan ke atom untuk mendapatkan/menetapkan nilainya.

Seperti yang Anda lihat pada gambar, hanya komponen yang berlangganan yang dirender ulang saat nilainya diubah. Itu membuat Recoil sangat berkinerja.

Hal hebat lainnya yang dimiliki Recoil adalah pemilih . Selektor adalah nilai yang dikumpulkan dari atom atau selektor lainnya. Bagi konsumen, tidak ada perbedaan antara atom dan selektor, mereka hanya perlu berlangganan beberapa bagian reaktif dan menggunakannya.

Setiap kali atom/pemilih diubah, selektor yang menggunakannya (yaitu, berlangganan) dievaluasi ulang.

Contoh Recoil API

Kode Recoil jauh lebih berbeda dari para pesaingnya. Ini didasarkan pada kait Bereaksi dan lebih berfokus pada struktur status daripada mengubah status ini.

KodeSandbox

 // atoms/counter.js import { atom } from "recoil"; const counterAtom = atom({ key: "counter", default: 0 }); export default counterAtom; // index.js import React from "react"; import ReactDOM from "react-dom"; import { RecoilRoot } from "recoil"; import App from "./App"; ReactDOM.render( <RecoilRoot> <App /> </RecoilRoot>, document.getElementById("root") ); // App.js import React from "react"; import { useRecoilState } from "recoil"; import counterAtom from "./atoms/counter"; const App = () => { const [count, setCount] = useRecoilState(counterAtom); return ( <div> <div> <button onClick={() => setCount(count + 1)}>Increment</button> <span>{count}</span> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> </div> ); }; export default App;

Atribut Kualitas

• Kegunaan . Recoil adalah salah satu alat yang paling mudah digunakan karena bekerja seperti useState di React.
• Pemeliharaan . Yang harus Anda lakukan di Recoil adalah memelihara selektor dan kait di dalam komponen—nilai lebih, pelat ketel lebih sedikit.
• Kinerja . Recoil membangun pohon status di luar React. Pohon keadaan memungkinkan Anda untuk mendapatkan dan mendengarkan hal-hal yang Anda butuhkan, bukan perubahan seluruh pohon. Ini juga dioptimalkan dengan baik di bawah tenda.
• Kemampuan untuk diuji . Recoil menyediakan mekanisme untuk menguji atom dan selektornya.
• Skalabilitas . Status yang terbagi menjadi beberapa bagian independen menjadikannya pemain yang baik dalam skalabilitas.
• Kemampuan untuk dimodifikasi . Recoil hanya bertanggung jawab untuk menyimpan nilai dan agregasinya. Tidak memiliki aliran data sehingga dapat dikustomisasi dengan mudah.
• Dapat digunakan kembali . Recoil bergantung pada React. Itu tidak dapat digunakan kembali di tempat lain.
• ekosistem . Tidak ada ekosistem untuk Recoil saat ini.
• Komunitas . Recoil terlalu segar untuk memiliki komunitas besar. Ada ~70 pertanyaan dengan tag recoiljs di Stack Overflow.
• pulsa . Recoil jarang diperbarui (enam bulan berlalu antara dua pembaruan terbarunya). Ini juga memiliki banyak masalah terbuka di GitHub.

Memilih Alat Manajemen React State yang Tepat

Bagaimana perpustakaan React global state management ini menumpuk ketika datang ke aplikasi tingkat perusahaan?

Recoil masih muda dan segar, tetapi tidak memiliki komunitas atau ekosistem saat ini. Meskipun Facebook sedang mengerjakannya dan API tampaknya menjanjikan, aplikasi React yang besar tidak dapat mengandalkan perpustakaan dengan dukungan komunitas yang lemah. Selain itu, ini eksperimental, membuatnya semakin tidak aman. Ini jelas bukan pilihan yang baik untuk aplikasi perusahaan React hari ini, tetapi perlu diperhatikan.

MobX dan Redux tidak berbagi masalah ini dan sebagian besar pemain besar di pasar menggunakannya. Apa yang membuat mereka berbeda satu sama lain adalah kurva belajar. MobX membutuhkan pemahaman dasar tentang pemrograman reaktif. Jika para insinyur yang terlibat dalam proyek tidak cukup terampil, aplikasi mungkin berakhir dengan inkonsistensi kode, masalah kinerja, dan peningkatan waktu pengembangan. MobX dapat diterima dan akan memenuhi kebutuhan Anda jika tim Anda mengetahui adanya reaktivitas.

Redux juga memiliki beberapa masalah, sebagian besar mengenai skalabilitas dan kinerja. Namun, tidak seperti MobX, ada solusi yang terbukti untuk masalah ini.

Mempertimbangkan setiap keuntungan dan kerugian, dan mempertimbangkan pengalaman pribadi saya, saya merekomendasikan Redux sebagai opsi terbaik untuk aplikasi React tingkat perusahaan.