Baru-baru ini saya mulai menggunakan React dan Redux untuk membangun kembali salah satu komponen utama di situs web Gogobot.
Untuk memahami masalahnya dengan lebih baik, berikut beberapa tangkapan layar salah satu komponen di halaman tersebut.
Tanpa benar-benar memahami seluk beluk komponen, Anda dapat melihat bahwa komponen-komponen tersebut memiliki banyak kesamaan:
- Hitung label yang ditampilkan/disembunyikan berdasarkan jumlah item yang saya pilih dari filter.
- Drop down yang terbuka saat mengklik ikon.
- Setelah diklik, ia mengirimkan peristiwa (tindakan) dan meminta data dari
- Setelah diklik, ia mengirimkan peristiwa (tindakan) dan meminta data dari server berdasarkan filter baru.
Saat merancang komponen ini, saya menyadari bahwa **perilaku** yang dibagikan di antara masing-masing komponen memerlukan **komponen tingkat tinggi** yang akan menentukan perilaku dan menggabungkan semua komponen "anak".
Melakukan hal ini dengan React murni cukup jelas jadi saya tidak akan membahasnya, postingan ini akan membahas tentang melakukan hal ini dengan Redux karena komponen tingkat tinggi terhubung ke pengiriman, penyimpanan, dan status.
Penerapan
// src/components/Filters/FilterWrapper/index.js
import React, { Component } from ‘react’;
import { bindActionCreators } from ‘redux’;
import { connect } from ‘react-redux’;
function FilterWrapper(ComposedFilter, filterInfo) {
class BaseFilter extends Component {
constructor() {
super();
this.state = {
count: 0
};
this.onCheckboxChange = this.onCheckboxChange.bind(this);
}
onClick(e) {
}
onCheckboxChange(e) {
}
render() {
let countLabel = this.state.count > 0 ?
<span>{ this.state.count }</span> :
null;
return(
<div className=”filterDetailsWrapper”>
<div className=”filterTotalCount”>
{ countLabel }
</div>
<div className=”optionsDropDownContainer”>
<ComposedFilter
{…this.state}
{…this.props}
onCheckboxChange={ this.onCheckboxChange }
/>
</div>
</div>
);
}
}
function mapStateToProps(state) {
// REDACTED
return {};
}
function mapDispatchToProps(dispatch) {
return {
…bindActionCreators(actions, dispatch)
};
}
return connect(mapStateToProps, mapDispatchToProps)(BaseFilter);
}
export default FilterWrapper;
Mari jelaskan apa yang terjadi di sini…
Kami membuat fungsi yang membungkus komponen dan mendefinisikan beberapa perilaku. Ini adalah perilaku bersama untuk semua komponen yang dibungkus. Dalam contoh ini kami hanya memiliki label hitungan sebagai contoh, tetapi Anda jelas dapat memperluasnya ke apa pun yang Anda bisa.
Mari kita lihat komponen yang dibungkus (HotelClass) untuk contoh ini
// src/components/Filters/HotelClass/index.js
import React, { Component } from ‘react’;
import ReactDOM from ‘react-dom’;
import BaseFilterWrapper from ‘../BaseFilterWrapper’;
class HotelClass extends Component {
render() {
return(
<div className=”hotelClassOptions”>
<ul>
<li className=”optionsdropdown”>
<label className=”optionTitle”>5</label>
<input onChange={ this.props.onCheckboxChange } type=”checkbox” value=”5" />
</li>
<li className=”optionsdropdown”>
<label className=”optionTitle”>4</label>
<input onChange={ this.props.onCheckboxChange } type=”checkbox” value=”4" />
</li>
</ul>
</div>
)
}
}
let filterInfo = {
name: ‘hotel_class’,
class_name: ‘hotelClass’,
title: ‘Hotel Class’
};
export default BaseFilterWrapper(HotelClass, filterInfo);
Seperti yang Anda lihat, ketika kotak centang berubah, ia memanggil this.props.onCheckboxChange yang berasal dari komponen tingkat tinggi dan pada gilirannya akan memanggil perilaku di sana.
Baris terakhir adalah yang “ajaib”, saya meneruskan beberapa `filterInfo` yang dapat Anda gunakan sesuai keinginan Anda (atau tidak), dan saya meneruskan komponen `HotelClass` yang dibungkus dengan fungsi `BaseFilterWrapper`.
Sekarang, mari kita terapkan logika untuk menampilkan label hitungan ketika kita mengklik kotak centang dan menyembunyikannya jika hitungannya 0
onCheckboxChange(e) {
let { count } = this.state;
var { checked, value } = e.target;
if (checked) {
count += 1;
} else {
count -= 1;
}
this.setState({
count
});
}
Itu saja.
Sekarang, Anda dapat berbagi logika komponen serupa.
Manfaat
Manfaat jelas dari pendekatan ini adalah jika Anda memiliki perilaku berbagi untuk sekumpulan komponen, Anda hanya menghubungkan "basis" ke penyimpanan dan mengelola semuanya darinya. Komponen Anda yang lain hanyalah "komponen bodoh" dan disuntik dengan perilaku tersebut.
Kodenya jauh lebih bersih dan ada satu titik masuk untuk tindakan/perubahan status pada sistem, ini menyederhanakan proses debug dan pengujian dan secara keseluruhan membuat kode lebih mudah dibaca.
