Perbedaan antara komponen dan kontainer dalam bereaksi redux

Komponen adalah bagian dari Bereaksi API. Sebuah Komponen adalah sebuah class atau fungsi yang menggambarkan bagian dari suatu Bereaksi UI.

Container adalah istilah informal untuk Bereaksi komponen yang menghubungkan-ed ke redux toko. Wadah menerima Redux negara update dan dispatch tindakan, dan mereka biasanya don't membuat elemen DOM; mereka mendelegasikan rendering untuk presentational anak komponen.

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

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

Bodoh/presentasi komponen adalah orang-orang yang bertanggung jawab untuk menyajikan pandangan yang didasarkan pada alat peraga yang diterima.

Artikel yang baik dengan contoh berikut

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

Komponen-komponen yang membangun sebuah piace dari pandangan, sehingga harus membuat elemen DOM, menempatkan konten pada layar.

Wadah berpartisipasi dalam data elaborasi, sehingga harus "berbicara" dengan redux, karena akan perlu untuk mengubah keadaan. Jadi, anda harus mencakup: connect (bereaksi-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);

Mereka're kedua komponen; wadah fungsional, sehingga mereka tidak membuat html sendiri, dan kemudian anda juga memiliki presentasi komponen, di mana anda menulis kode html sebenarnya. Tujuan wadah ini untuk peta negara dan pengiriman untuk alat peraga untuk penyajian komponen.

Bacaan lebih lanjut: Link

Bereaksi, Redux independen perpustakaan.

Bereaksi menyediakan anda dengan kerangka kerja untuk membuat dokumen HTML. Komponen dalam cara yang mewakili bagian tertentu dari dokumen. Metode yang terkait dengan komponen kemudian dapat dimanipulasi sangat bagian tertentu dari dokumen.

Redux adalah sebuah kerangka kerja yang mengatur tertentu pilosopi untuk menyimpan dan mengelola data di JS lingkungan. Itu satu-JS objek dengan metode-metode tertentu yang ditetapkan, kasus penggunaan terbaik datang dalam bentuk negara pengelolaan aplikasi web.

Sejak Bereaksi mengatur bahwa semua data yang harus mengalir dari akar ke daun, menjadi membosankan untuk main semua alat peraga, mendefinisikan alat peraga dalam komponen-komponen dan kemudian melewati alat peraga alat peraga tertentu untuk anak-anak. Hal ini juga membuat seluruh aplikasi negara yang rentan.

Bereaksi Redux menawarkan solusi yang bersih, di mana ia menghubungkan anda langsung ke Redux toko, dengan hanya membungkus terhubung komponen sekitar lain Bereaksi Komponen( anda Container). Karena dalam implementasinya, penerapan anda anda sudah didefinisikan yang sepotong dari seluruh negara aplikasi yang anda butuhkan. Jadi connect mengambil data tersebut keluar dari toko dan lolos sebagai alat peraga untuk komponen itu membungkus dirinya di sekitar.

Perhatikan 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 
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connect fungsi melewati prop jenis.

Cara ini menghubungkan bertindak sebagai wadah bagi Orang komponen.

Bereaksi memiliki dua komponen utama pertama adalah smart komponen(wadah) dan kedua adalah bodoh(presentasi komponen). Wadah yang sangat mirip dengan komponen, satu-satunya perbedaan adalah bahwa wadah menyadari kondisi aplikasi. Jika bagian dari halaman web anda hanya digunakan untuk menampilkan data (bodoh) kemudian membuat sebuah komponen. Jika anda perlu untuk menjadi pintar dan paham negara (setiap kali perubahan data) dalam aplikasi kemudian membuat sebuah wadah.

Komponen

Komponen-komponen yang memungkinkan anda membagi UI menjadi independen, dapat digunakan kembali potongan-potongan, dan berpikir tentang masing-masing bagian dalam isolasi. Mereka kadang-kadang disebut "penyajian komponen" dan perhatian utama adalah bagaimana hal-hal terlihat

Wadah

Wadah yang sama seperti komponen tanpa UI dan Wadah prihatin dengan bagaimana hal-hal bekerja.. Hal ini terutama pembicaraan untuk redux toko untuk mendapatkan dan meng-update data

lihat tabel perbandingan dari Redux doc

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