Mengapa menggunakan Redux di Facebook Flux? [Tutup]

Saya sudah membaca jawaban ini , mengurangi boilerplate , melihat beberapa contoh GitHub dan bahkan mencoba sedikit redux (todo apps).

Seperti yang saya pahami, motivasi redux doc resmi memberikan kelebihan dibandingkan dengan arsitektur MVC tradisional. TAPI itu tidak memberikan jawaban untuk pertanyaan:

Mengapa Anda harus menggunakan Redux di Facebook Flux?

Apakah itu hanya masalah gaya pemrograman: fungsional vs non-fungsional? Atau pertanyaannya adalah kemampuan / dev-tools yang mengikuti dari pendekatan redux? Mungkin scaling? Atau pengujian?

Apakah saya benar jika saya mengatakan bahwa redux adalah fluks untuk orang yang berasal dari bahasa fungsional?

Untuk menjawab pertanyaan ini, Anda dapat membandingkan kompleksitas poin motivasi implementasi redux pada fluks vs redux.

Berikut adalah poin motivasi dari motivasi resmi redux doc :

1. Menangani pembaruan yang optimis ( seperti yang saya mengerti, hampir tidak bergantung pada poin 5. Apakah sulit untuk mengimplementasikannya di fluks facebook? )
2. Rendering di server ( fluks facebook juga dapat melakukan ini. Adakah manfaat dibandingkan dengan redux? )
3. Mengambil data sebelum melakukan transisi rute ( Mengapa itu tidak dapat dicapai dalam fluks facebook? Apa manfaatnya? )
4. Hot reload ( Mungkin dengan React Hot Reload . Mengapa kita perlu redux? )
5. Batalkan / Ulangi fungsi
6. Ada poin lain? Seperti kondisi bertahan ...

Penulis redux di sini!

Redux tidak yang berbeda dari Flux. Secara keseluruhan ia memiliki arsitektur yang sama, tetapi Redux mampu memotong beberapa sudut kompleksitas dengan menggunakan komposisi fungsional di mana Flux menggunakan pendaftaran callback.

Tidak ada perbedaan mendasar dalam Redux, tetapi saya merasa hal itu membuat abstraksi tertentu lebih mudah, atau setidaknya mungkin untuk diterapkan, yang akan sulit atau tidak mungkin untuk diterapkan di Flux.

Komposisi Peredam

Ambil, misalnya, pagination. Saya Flux + Bereaksi Router contoh menangani pagination, tapi kode untuk itu mengerikan. Salah satu alasannya mengerikan adalah Flux membuatnya tidak wajar untuk menggunakan kembali fungsionalitas di seluruh toko. Jika dua toko perlu menangani pagination dalam menanggapi tindakan yang berbeda, mereka juga perlu mewarisi dari toko basis umum (buruk! Anda mengunci diri Anda ke dalam desain tertentu ketika Anda menggunakan warisan), atau memanggil fungsi yang ditentukan secara eksternal dari dalam pengendali acara, yang perlu entah bagaimana beroperasi di negara pribadi Flux store. Semuanya berantakan (meskipun pasti di bidang yang mungkin).

Di sisi lain, pagination Redux adalah alami berkat komposisi peredam. Ini reduksi sepanjang jalan, sehingga Anda dapat menulis pabrik peredam yang menghasilkan peredam pagination dan kemudian menggunakannya di pohon peredam Anda . Kunci mengapa begitu mudah adalah karena di Flux, toko datar, tetapi di Redux, reduksi dapat bersarang melalui komposisi fungsional, sama seperti komponen Bereaksi dapat bersarang.

Pola ini juga memungkinkan fitur-fitur luar biasa seperti no-user-code undo / redo . Bisakah Anda bayangkan memasukkan Undo / Redo ke aplikasi Flux menjadi dua baris kode? Hampir tidak. Dengan Redux, itu — lagi- lagi, berkat pola komposisi peredam. Saya perlu menggarisbawahi bahwa tidak ada yang baru tentang hal ini — ini adalah pola yang dipelopori dan dijelaskan secara rinci dalam Arsitektur Elm yang sendiri dipengaruhi oleh Flux.

Rendering Server

Orang-orang telah melakukan rendering pada server dengan Flux, tetapi melihat bahwa kami memiliki 20 pustaka Flux yang masing-masing berusaha membuat rendering server “lebih mudah”, mungkin Flux memiliki beberapa sisi yang kasar pada server. Yang benar adalah Facebook tidak melakukan banyak rendering server, jadi mereka tidak terlalu khawatir tentang hal itu, dan mengandalkan ekosistem untuk membuatnya lebih mudah.

Dalam Flux tradisional, toko adalah lajang. Ini berarti sulit untuk memisahkan data untuk permintaan yang berbeda di server. Bukan tidak mungkin, tetapi sulit. Inilah sebabnya mengapa sebagian besar pustaka Flux (dan juga Flux Utils baru ) sekarang menyarankan Anda menggunakan kelas alih-alih lajang, sehingga Anda dapat membuat instantiate toko per permintaan.

Masih ada masalah berikut yang perlu Anda selesaikan di Flux (baik Anda sendiri atau dengan bantuan pustaka Flux favorit Anda seperti Flummox atau Alt ):

• Jika toko adalah kelas, bagaimana cara membuat dan menghancurkannya dengan operator berdasarkan permintaan? Kapan saya mendaftar toko?
• Bagaimana cara menghidrasi data dari toko dan kemudian mengembalikannya pada klien? Apakah saya perlu menerapkan metode khusus untuk ini?

Diakui kerangka kerja Flux (bukan vanilla Flux) memiliki solusi untuk masalah ini, tapi saya merasa mereka terlalu rumit. Sebagai contoh, Flummox meminta Anda untuk mengimplementasikan serialize()dan deserialize()di toko Anda . Alt memecahkan ini lebih baik dengan menyediakan takeSnapshot()yang secara otomatis membuat serial keadaan Anda di pohon JSON.

Redux melangkah lebih jauh: karena hanya ada satu toko (dikelola oleh banyak reduksi), Anda tidak memerlukan API khusus untuk mengelola hidrasi (kembali). Anda tidak perlu "menyiram" atau "menghidrasi" toko — hanya ada satu toko, dan Anda dapat membaca keadaan saat ini, atau membuat toko baru dengan keadaan baru. Setiap permintaan mendapat contoh toko terpisah. Baca lebih lanjut tentang rendering server dengan Redux.

Sekali lagi, ini adalah kasus dari sesuatu yang mungkin baik di Flux dan Redux, tetapi perpustakaan Flux menyelesaikan masalah ini dengan memperkenalkan satu ton API dan konvensi, dan Redux bahkan tidak harus menyelesaikannya karena tidak memiliki masalah di Tempat pertama berkat kesederhanaan konseptual.

Pengalaman Pengembang

Saya sebenarnya tidak bermaksud Redux untuk menjadi perpustakaan Flux yang populer — saya menulisnya ketika saya sedang mengerjakan pembicaraan ReactEurope saya tentang pemuatan ulang panas dengan perjalanan waktu . Saya memiliki satu tujuan utama: memungkinkan untuk mengubah kode peredam dengan cepat atau bahkan "mengubah masa lalu" dengan mencoret tindakan, dan melihat negara tersebut dihitung ulang.

Saya belum melihat perpustakaan Flux tunggal yang dapat melakukan ini. Bereaksi Hot Loader juga tidak membiarkan Anda melakukan ini — sebenarnya rusak jika Anda mengedit toko Flux karena tidak tahu apa yang harus dilakukan dengan mereka.

Ketika Redux perlu memuat ulang kode peredam, itu memanggil replaceReducer(), dan aplikasi berjalan dengan kode baru. Di Flux, data dan fungsi terjerat di Flux store, jadi Anda tidak bisa "hanya mengganti fungsi". Selain itu, Anda harus mendaftarkan ulang entah bagaimana versi baru ke Dispatcher — sesuatu yang bahkan Redux tidak miliki.

Ekosistem

Redux memiliki ekosistem yang kaya dan tumbuh cepat . Ini karena ia menyediakan beberapa titik ekstensi seperti middleware . Itu dirancang dengan menggunakan kasus-kasus seperti penebangan , dukungan untuk Janji , Observable , perutean , pemeriksaan dev abadi , ketekunan , dll, dalam pikiran. Tidak semua ini ternyata bermanfaat, tetapi senang memiliki akses ke seperangkat alat yang dapat dengan mudah digabungkan untuk bekerja bersama.

Kesederhanaan

Redux mempertahankan semua manfaat Flux (merekam dan memutar ulang tindakan, aliran data searah, mutasi dependen) dan menambahkan manfaat baru (mudah dibatalkan, reload panas) tanpa memperkenalkan Dispatcher dan registrasi toko.

Menjaga agar tetap sederhana itu penting karena itu membuat Anda tetap waras saat Anda menerapkan abstraksi tingkat yang lebih tinggi.

Tidak seperti kebanyakan pustaka Flux, permukaan Redux API kecil. Jika Anda menghapus peringatan pengembang, komentar, dan cek kewarasan, itu 99 baris . Tidak ada kode async yang rumit untuk debug.

Anda benar-benar dapat membacanya dan memahami semua Redux.

Lihat juga jawaban saya tentang kerugian menggunakan Redux dibandingkan dengan Flux .

Di Quora, seseorang berkata :

Pertama-tama, sangat mungkin untuk menulis aplikasi dengan Bereaksi tanpa Fluks.

Juga diagram visual yang saya buat untuk menunjukkan tampilan cepat keduanya, mungkin jawaban cepat untuk orang-orang yang tidak ingin membaca seluruh penjelasan:

Tetapi jika Anda masih tertarik mengetahui lebih banyak, baca terus.

Saya percaya Anda harus mulai dengan Bereaksi murni, kemudian belajar Redux dan Flux. Setelah Anda memiliki pengalaman NYATA dengan Bereaksi, Anda akan melihat apakah Redux bermanfaat bagi Anda atau tidak.

Mungkin Anda akan merasa bahwa Redux tepat untuk aplikasi Anda dan mungkin Anda akan mengetahuinya, bahwa Redux sedang mencoba menyelesaikan masalah yang tidak benar-benar Anda alami.

Jika Anda mulai langsung dengan Redux, Anda mungkin berakhir dengan kode rekayasa berlebihan, kode lebih sulit untuk dipelihara dan bahkan dengan lebih banyak bug dan daripada tanpa Redux.

Dari Redux docs :

Motivasi
Karena persyaratan untuk aplikasi satu halaman JavaScript menjadi semakin rumit, kode kita harus mengelola lebih banyak keadaan daripada sebelumnya. Keadaan ini dapat mencakup respons server dan data yang di-cache, serta data yang dibuat secara lokal yang belum ada di server. Keadaan UI juga semakin kompleks, karena kami perlu mengelola rute aktif, tab terpilih, pemintal, kontrol pagination, dan sebagainya.

Mengelola keadaan yang terus berubah ini sulit. Jika model dapat memperbarui model lain, maka tampilan dapat memperbarui model, yang memperbarui model lain, dan ini, pada gilirannya, dapat menyebabkan tampilan lain diperbarui. Pada titik tertentu, Anda tidak lagi mengerti apa yang terjadi di aplikasi Anda karena Anda kehilangan kendali atas kapan, mengapa, dan bagaimana kondisinya. Ketika suatu sistem buram dan non-deterministik, sulit untuk mereproduksi bug atau menambahkan fitur baru.

Seolah ini tidak cukup buruk, pertimbangkan persyaratan baru yang umum dalam pengembangan produk front-end. Sebagai pengembang, kami diharapkan untuk menangani pembaruan yang optimis, rendering sisi server, pengambilan data sebelum melakukan transisi rute, dan sebagainya. Kami mendapati diri kami berusaha mengelola kompleksitas yang belum pernah kami hadapi sebelumnya, dan kami mau tak mau mengajukan pertanyaan: Apakah sudah waktunya untuk menyerah? Jawabannya adalah tidak.

Kompleksitas ini sulit untuk ditangani karena kami sedang mencampur dua konsep yang sangat sulit untuk dipikirkan oleh manusia: mutasi dan asinkronisitas. Saya menyebutnya Mentos dan Coke. Keduanya bisa menjadi hebat ketika dipisahkan, tetapi bersama-sama mereka membuat berantakan. Perpustakaan seperti React berupaya untuk memecahkan masalah ini di lapisan tampilan dengan menghapus kedua asynchrony dan manipulasi DOM langsung. Namun, mengelola keadaan data Anda diserahkan kepada Anda. Di sinilah Redux masuk.

Mengikuti jejak Flux, CQRS, dan Event Sourcing, Redux berupaya membuat mutasi negara dapat diprediksi dengan menerapkan batasan tertentu tentang bagaimana dan kapan pembaruan dapat terjadi. Pembatasan ini tercermin dalam tiga prinsip Redux.

Juga dari Redux docs :

Konsep Inti
Redux sendiri sangat sederhana.

Bayangkan keadaan aplikasi Anda digambarkan sebagai objek biasa. Misalnya, keadaan aplikasi todo mungkin terlihat seperti ini:

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Objek ini seperti "model" kecuali bahwa tidak ada setter. Ini agar bagian kode yang berbeda tidak dapat mengubah status secara sewenang-wenang, menyebabkan bug yang sulit direproduksi.

Untuk mengubah sesuatu di negara bagian, Anda perlu mengirim tindakan. Tindakan adalah objek JavaScript biasa (perhatikan bagaimana kami tidak memperkenalkan sihir apa pun?) Yang menjelaskan apa yang terjadi. Berikut adalah beberapa contoh tindakan:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Menegaskan bahwa setiap perubahan dijelaskan sebagai tindakan memungkinkan kami memiliki pemahaman yang jelas tentang apa yang terjadi di aplikasi. Jika sesuatu berubah, kita tahu mengapa itu berubah. Tindakan seperti remah roti dari apa yang telah terjadi. Akhirnya, untuk mengikat keadaan dan tindakan bersama, kami menulis fungsi yang disebut reducer. Sekali lagi, tidak ada yang ajaib tentang hal itu - itu hanya fungsi yang mengambil status dan tindakan sebagai argumen, dan mengembalikan status aplikasi berikutnya. Akan sulit untuk menulis fungsi seperti itu untuk aplikasi besar, jadi kami menulis fungsi yang lebih kecil mengelola bagian negara:

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Dan kami menulis peredam lain yang mengelola keadaan lengkap aplikasi kami dengan memanggil kedua pereduksi tersebut untuk kunci negara terkait:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

Ini pada dasarnya adalah gagasan Redux. Perhatikan bahwa kami belum pernah menggunakan Redux API. Muncul dengan beberapa utilitas untuk memfasilitasi pola ini, tetapi ide utamanya adalah Anda menggambarkan bagaimana keadaan Anda diperbarui dari waktu ke waktu dalam menanggapi objek tindakan, dan 90% dari kode yang Anda tulis hanyalah JavaScript biasa, tanpa menggunakan Redux sendiri, API-nya, atau sihir apa pun.

Anda mungkin sebaiknya memulai dengan membaca posting ini oleh Dan Abramov di mana ia membahas berbagai implementasi Flux dan pertukarannya pada saat ia menulis redux: The Evolution of Flux Frameworks

Kedua, halaman motivasi yang Anda tautkan tidak benar-benar membahas motivasi Redux sebanyak motivasi di balik Flux (dan Bereaksi). The Three Prinsip ini lebih Redux spesifik meskipun masih tidak berurusan dengan perbedaan implementasi dari arsitektur Flux standar.

Pada dasarnya, Flux memiliki banyak toko yang menghitung perubahan keadaan sebagai respons terhadap interaksi UI / API dengan komponen dan menyiarkan perubahan ini sebagai peristiwa yang dapat diikuti oleh komponen. Di Redux, hanya ada satu toko yang berlangganan setiap komponen. IMO rasanya setidaknya seperti Redux lebih lanjut menyederhanakan dan menyatukan aliran data dengan menyatukan (atau mengurangi, seperti yang dikatakan Redux) aliran data kembali ke komponen - sedangkan Flux berkonsentrasi pada penyatuan sisi lain dari aliran data - lihat ke model.

Saya pengguna awal dan menerapkan aplikasi halaman tunggal berukuran sedang dengan menggunakan pustaka Flux Facebook.

Karena saya sedikit terlambat dalam percakapan, saya akan menunjukkan bahwa meskipun harapan saya yang terbaik, Facebook tampaknya menganggap implementasi Flux mereka sebagai bukti konsep dan tidak pernah menerima perhatian yang layak.

Saya mendorong Anda untuk bermain dengannya, karena memperlihatkan lebih banyak pekerjaan dalam arsitektur Flux yang cukup mendidik, tetapi pada saat yang sama itu tidak memberikan banyak manfaat yang disediakan oleh perpustakaan seperti Redux (yang tidak yang penting untuk proyek kecil, tetapi menjadi sangat berharga untuk yang lebih besar).

Kami telah memutuskan bahwa bergerak maju kami akan pindah ke Redux dan saya sarankan Anda melakukan hal yang sama;)

Berikut adalah penjelasan sederhana tentang Redux over Flux. Redux tidak memiliki operator. Itu bergantung pada fungsi murni yang disebut reduksi. Itu tidak perlu operator. Setiap tindakan ditangani oleh satu atau lebih reduksi untuk memperbarui satu toko. Karena data tidak dapat diubah, reduksi mengembalikan status baru yang diperbarui yang memperbarui toko

Untuk informasi lebih lanjut Fluks vs Redux

Saya bekerja cukup lama dengan Flux dan sekarang cukup lama menggunakan Redux. Seperti Dan tunjukkan kedua arsitektur tidak begitu berbeda. Masalahnya adalah bahwa Redux membuat hal-hal menjadi lebih sederhana dan bersih. Ini mengajarkan Anda beberapa hal di atas Flux. Seperti misalnya Flux adalah contoh sempurna dari aliran data satu arah. Pemisahan masalah di mana kami memiliki data, manipulasi dan lapisan tampilan terpisah. Di Redux kami memiliki hal-hal yang sama tetapi kami juga belajar tentang kekekalan dan fungsi murni.

Dari adopter reaksi / reduks baru yang bermigrasi dari (beberapa tahun) ExtJS pada pertengahan 2018:

Setelah meluncur mundur ke bawah kurva pembelajaran reduks saya punya pertanyaan yang sama dan berpikir fluks murni akan lebih sederhana seperti OP.

Saya segera melihat manfaat reduks daripada fluks seperti disebutkan dalam jawaban di atas, dan sedang mengerjakannya di aplikasi pertama saya.

Sementara mendapatkan pegangan pada pelat ketel lagi, saya mencoba beberapa libs manajemen negara lain , yang terbaik yang saya temukan adalah pertandingan ulang .

Itu jauh lebih intuitif daripada vanilla redux, itu memotong 90% dari boilerplate dan memotong 75% dari waktu saya habiskan untuk redux (sesuatu yang saya pikir perpustakaan harus lakukan), saya bisa mendapatkan beberapa aplikasi enterprise segera pergi.

Ini juga berjalan dengan tool redux yang sama. Ini adalah artikel bagus yang membahas beberapa manfaat.

Jadi bagi siapa pun yang datang ke posting SO ini mencari "redux sederhana", saya sarankan mencobanya sebagai alternatif sederhana untuk redux dengan semua manfaat dan 1/4 dari pelat boiler.

Menurut artikel ini: https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

Anda lebih baik menggunakan MobX untuk mengelola data di aplikasi Anda untuk mendapatkan kinerja yang lebih baik, bukan Redux.