Hai,
Saya menggunakan redux dengan react-native dan sejauh ini bagus!
Di aplikasi saya, saya memiliki profil pengguna, dan status saya terlihat seperti:
{
users: {
"1": {id: "1", name: "Ran"},
"2": {id: "2", name: "Dan"}
}
}
Sekarang saya memiliki komponen <Profile>
yang membuat satu pengguna
class Profile extends React.Component {
componentDidMount() {
const { dispatch, userId } = this.props;
dispatch(loadUser(userId));
}
render() {
console.log(this.props.user.name);
}
}
Ketika komponen mount, saya mengirimkan loadUser
action dengan userId
dilewatkan sebagai prop.
Ini membuat permintaan ke API, dan menambahkan tanggapan pengguna ke status users
.
Sekarang, saya ingin komponen Profil saya menerima pengguna untuk dirender sebagai prop.
Jadi pada dasarnya saya ingin melakukan sesuatu seperti:
function mapStateToProps(state) {
return {
user: state.users[props.userId]
};
}
module.exports = connect(mapStateToProps)(Profile);
Jelas itu tidak dapat berfungsi karena saya tidak memiliki akses ke alat peraga.
Saya tidak dapat menggunakan status seperti selectedProfile
untuk memfilter karena saya membuat beberapa profil di tumpukan navigasi saya, masing-masing memiliki userId yang berbeda, jika saya menggunakan status global selectedProfile, tombol kembali akan rusak.
Satu-satunya solusi yang saya temukan adalah membuat komponen ProfileContainer
, yang akan memfilter status dengan prop dan meneruskan pengguna tunggal ke komponen Profile
.
class ProfileContainer extends React.Component {
render() {
let user = this.props.users[this.prop.userId];
return <Profile user={user} />
}
}
Apakah masuk akal? Ada lagi yang mengalami masalah ini?
Terima kasih,
Ran.
Hei,
Ini lebih merupakan masalah react-redux ... Saya mungkin melewatkan sesuatu, tetapi tampaknya sangat sederhana bagi saya, gunakan argumen "ownProps" yang diteruskan ke mapStateToProps, sehingga kode Anda di atas akan terlihat:
function mapStateToProps(state, ownProps) {
return {
user: state.users[ownProps.userId]
};
}
module.exports = connect(mapStateToProps)(Profile);
Anda pasti memiliki akses ke props komponen. Bagaimana kelihatannya? Lihat https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options untuk detail lebih lanjut atau https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js untuk contoh dunia nyata ...
Aku tidak percaya aku melewatkannya! Terima kasih @alanrubin
:jempolan:
Harap ajukan masalah seperti itu di react-redux di masa mendatang.
Ini tidak terkait dengan repositori ini.
Komentar yang paling membantu
Hei,
Ini lebih merupakan masalah react-redux ... Saya mungkin melewatkan sesuatu, tetapi tampaknya sangat sederhana bagi saya, gunakan argumen "ownProps" yang diteruskan ke mapStateToProps, sehingga kode Anda di atas akan terlihat:
Anda pasti memiliki akses ke props komponen. Bagaimana kelihatannya? Lihat https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options untuk detail lebih lanjut atau https://github.com/rackt/redux/blob/master/examples/real-world/containers/ UserPage.js untuk contoh dunia nyata ...