Perbedaan antara komponen dan wadah dalam reaksi reduks

Apa perbedaan antara komponen dan wadah dalam reaksi reduks?

Componentadalah bagian dari React API. Komponen adalah kelas atau fungsi yang menjelaskan bagian dari UI Bereaksi.

Kontainer adalah istilah informal untuk komponen Bereaksi yang connectdikirimkan ke toko redux. Kontainer menerima pembaruan dan dispatchtindakan negara Redux , dan mereka biasanya tidak membuat elemen DOM; mereka mendelegasikan rendering ke komponen anak presentasi .

Untuk lebih detail baca komponen presentasi vs wadah oleh Dan Abramov.

Komponen yang bertanggung jawab untuk mengambil data dan menampilkan disebut komponen cerdas atau wadah. Data dapat berasal dari redux, panggilan jaringan apa pun, atau berlangganan pihak ketiga.

Komponen bisu / presentasi adalah komponen yang bertanggung jawab untuk menyajikan tampilan berdasarkan alat peraga yang diterima.

Artikel bagus dengan contoh di sini

https://www.cronj.com/blog/difference-container-component-react-js/

Komponen membangun piace dari pandangan, sehingga harus membuat elemen DOM, meletakkan konten di layar.

Wadah berpartisipasi dalam elaborasi data, sehingga harus "berbicara" dengan redux, karena akan perlu mengubah keadaan. Jadi, Anda harus menyertakan connect (react-redux) apa yang membuat koneksi, dan fungsi mapStateToProps dan mapDispatchToProps :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

Komponen

Komponen memungkinkan Anda membagi UI menjadi bagian-bagian yang independen dan dapat digunakan kembali, dan memikirkan setiap bagian secara terpisah. Mereka kadang-kadang disebut "komponen presentasi" dan perhatian utama adalah bagaimana hal-hal terlihat

Wadah

Wadah sama seperti komponen tanpa UI dan Wadah peduli dengan cara kerja. . Ini terutama berbicara ke toko redux untuk mendapatkan dan memperbarui data

lihat perbandingan tabel dari Redux doc

Penjelasan terperinci https://redux.js.org/basics/usage-with-react#presentational-and-container-components

Keduanya adalah komponen; kontainer fungsional, sehingga mereka tidak membuat html sendiri, dan kemudian Anda juga memiliki komponen presentasi, di mana Anda menulis html yang sebenarnya. Tujuan dari wadah ini adalah untuk memetakan keadaan dan mengirim alat peraga untuk komponen presentasi.

Bacaan lebih lanjut: Tautan

Bereaksi, Redux adalah perpustakaan independen.

Bereaksi memberi Anda kerangka kerja untuk membuat dokumen HTML. Komponen dengan cara mewakili bagian tertentu dari dokumen. Metode yang terkait dengan komponen kemudian dapat memanipulasi bagian dokumen yang sangat khusus.

Redux adalah kerangka kerja yang mengatur filosofi spesifik untuk menyimpan dan mengelola data di lingkungan JS. Ini satu objek JS besar dengan metode tertentu yang ditentukan, kasus penggunaan terbaik datang dalam bentuk pengelolaan negara aplikasi web.

Karena Bereaksi menetapkan bahwa semua data harus mengalir turun dari akar ke daun, menjadi membosankan untuk merawat semua alat peraga, mendefinisikan alat peraga dalam komponen dan kemudian meneruskan alat peraga ke alat peraga tertentu kepada anak-anak. Itu juga membuat seluruh negara aplikasi rentan.

React Redux menawarkan solusi bersih, di mana ia langsung menghubungkan Anda ke toko Redux, dengan hanya membungkus komponen yang terhubung di sekitar Komponen Bereaksi lain (Anda Container). Karena dalam implementasi Anda, implementasi Anda, Anda sudah menentukan bagian mana dari seluruh negara aplikasi yang Anda butuhkan. Jadi connectmengambil data itu keluar dari toko dan meneruskannya sebagai alat peraga ke komponen itu membungkus dirinya diseluruh.

Pertimbangkan contoh sederhana ini:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connectfungsi melewati penyangga type.

Dengan cara ini sambungan berfungsi sebagai wadah untuk komponen Orang.

Bereaksi memiliki dua komponen utama pertama adalah komponen pintar (wadah) dan yang kedua bodoh (komponen presentasi). Wadah sangat mirip dengan komponen, satu-satunya perbedaan adalah bahwa wadah mengetahui kondisi aplikasi. Jika bagian dari halaman web Anda hanya digunakan untuk menampilkan data (bodoh) maka jadikan itu komponen. Jika Anda membutuhkannya untuk menjadi cerdas dan mengetahui keadaan (setiap kali data berubah) dalam aplikasi, maka jadikan itu wadah.