Banyak yang telah ditulis tentang reaksi dan redux serta aliran data satu arah dan bagaimana Anda dapat menggabungkan semua ini untuk membuat pelangi kentut unicorn dari Aplikasi Halaman Tunggal Anda. Namun dalam postingan ini, saya akan berbicara tentang pola Penyedia yang digunakan oleh React-Redux (dan MobX dan Apollo serta kerangka kerja masa depan lainnya).
Bahasa pemrograman dan kerangka kerja yang berbeda menghasilkan implementasi yang berbeda pada pola Penyedia. Saya akan menulis tentang pola Penyedia di dunia reaksi.
Sebelum kita mengetahui lebih banyak tentang pola Penyedia, ada baiknya Anda membaca dokumen konteks di sini. Saya akan mencoba meringkas apa yang dapat dilakukan api konteks bagi kita dalam gambar di bawah (representasi gambar bukanlah keahlian saya, tetapi saya tetap mencoba dan melakukan upaya yang berani) -
Pada dasarnya, menambahkan data ke konteks sebuah node membuat data tersebut tersedia untuk seluruh subpohon dari node tersebut. Kami biasanya menggunakan api konteks untuk membuat data tersedia untuk seluruh pohon komponen. Kasus penggunaan yang baik untuk menggunakan api konteks adalah memberi tema pada data terkait yang kita ingin semua node kita miliki aksesnya. Coba tebak apa lagi yang bisa disediakan untuk semua node di pohon komponen melalui api konteks? Ya, Anda benar — toko redux.
<Provider store={store}>
<App />
</Provider>
Potongan kode di atas memastikan bahwa penyimpanan redux tersedia untuk semua node di pohon komponen melalui api konteks. Faktanya, dengan cara inilah fungsi 'connect' mendapatkan akses ke penyimpanan redux, meskipun kami tidak pernah secara eksplisit meneruskan penyimpanan tersebut sebagai referensi atau parameter di mana pun. Secara kasar, kode 'connect' mirip dengan (hanya dalam semantik — kode sebenarnya jauh lebih kuat) —
const connect = Component => class extends React.Component {
constructor(props, context) {
super(props, context);
const { store } = context;
// do everything related to store subscriptions, etc, here.
}
render() {
return // refer actual code on github :)
// https://github.com/reduxjs/react-redux/blob/master/src/components/connectAdvanced.js
}
}
Itu dia - komponen Penyedia yang mengatur konteks dan HoC rapi yang memperoleh data yang diperlukan dari konteks yang ditetapkan oleh Penyedia. Bersama-sama, mereka memberikan Pengalaman Pengembang yang cukup baik dan merangkum banyak kompleksitas mendasar. Rapi, kan?
