Redux: Peta negara ke alat peraga menggunakan prop?

Dibuat pada 6 Sep 2015  ·  4Komentar  ·  Sumber: reduxjs/redux

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.

question

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:

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 ...

Semua 4 komentar

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.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

CellOcean picture CellOcean  ·  3Komentar

jbri7357 picture jbri7357  ·  3Komentar

timdorr picture timdorr  ·  3Komentar

benoneal picture benoneal  ·  3Komentar

elado picture elado  ·  3Komentar