Redux: Zuordnen des Status zu Requisiten mit Prop?

Erstellt am 6. Sept. 2015  ·  4Kommentare  ·  Quelle: reduxjs/redux

Hallo,

Ich benutze Redux mit React-Native und bis jetzt ist es großartig!
In meiner App habe ich Benutzerprofile und mein Status sieht wie folgt aus:

{
  users: {
    "1": {id: "1", name: "Ran"},
    "2": {id: "2", name: "Dan"}
  }
}

Jetzt habe ich eine <Profile> -Komponente, die einen einzelnen Benutzer rendert

class Profile extends React.Component {
  componentDidMount() {
    const { dispatch, userId } = this.props;
    dispatch(loadUser(userId));
  }
  render() {
    console.log(this.props.user.name);
  }
}

Wenn die Komponente montiert ist, versende ich die Aktion loadUser mit dem als Requisite übergebenen userId .
Dadurch wird eine Anforderung an die API gesendet und die Benutzerantwort zu meinem Status users hinzugefügt.

Jetzt möchte ich, dass meine Profilkomponente den Benutzer als Requisite rendert.
Im Grunde möchte ich so etwas tun wie:

function mapStateToProps(state) {
  return {
    user: state.users[props.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

Offensichtlich kann es nicht funktionieren, weil ich keinen Zugang zu Requisiten habe.
Ich kann keinen Status wie selectedProfile zum Filtern verwenden, da ich mehrere Profile in meinem Navigationsstapel rendere. Jedes hat eine andere Benutzer-ID. Wenn ich den globalen Status "selectedProfile" verwende, wird die Schaltfläche "Zurück" unterbrochen.

Die einzige Problemumgehung, die ich gefunden habe, besteht darin, eine ProfileContainer -Komponente zu erstellen, die den Status nach ihrer Requisite filtert und den einzelnen Benutzer an die Profile -Komponente übergibt.

class ProfileContainer extends React.Component {
  render() {
    let user = this.props.users[this.prop.userId];
    return <Profile user={user} />
  }
}

Macht das Sinn? Ist noch jemand auf dieses Problem gestoßen?

Vielen Dank,
Ran.

question

Hilfreichster Kommentar

Hallo,

Dies ist eher ein React-Redux-Problem ... Ich vermisse möglicherweise etwas, aber es scheint mir sehr einfach zu sein. Verwenden Sie das Argument "ownProps", das an mapStateToProps übergeben wird, damit Ihr Code oben wie folgt aussieht:

function mapStateToProps(state, ownProps) {
  return {
    user: state.users[ownProps.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

Sie haben definitiv Zugriff auf die Requisiten der Komponente. Wie sieht das aus Weitere Informationen finden Sie unter https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options oder unter https://github.com/rackt/redux/blob/master/examples/real-world/containers/. UserPage.js für das reale Beispiel ...

Alle 4 Kommentare

Hallo,

Dies ist eher ein React-Redux-Problem ... Ich vermisse möglicherweise etwas, aber es scheint mir sehr einfach zu sein. Verwenden Sie das Argument "ownProps", das an mapStateToProps übergeben wird, damit Ihr Code oben wie folgt aussieht:

function mapStateToProps(state, ownProps) {
  return {
    user: state.users[ownProps.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

Sie haben definitiv Zugriff auf die Requisiten der Komponente. Wie sieht das aus Weitere Informationen finden Sie unter https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options oder unter https://github.com/rackt/redux/blob/master/examples/real-world/containers/. UserPage.js für das reale Beispiel ...

Ich kann nicht glauben, dass ich das verpasst habe! Danke @alanrubin

:Daumen hoch:

Bitte reichen Sie solche Probleme in Zukunft in React-Redux ein.
Es hat nichts mit diesem Repository zu tun.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

benoneal picture benoneal  ·  3Kommentare

parallelthought picture parallelthought  ·  3Kommentare

vslinko picture vslinko  ·  3Kommentare

ms88privat picture ms88privat  ·  3Kommentare

timdorr picture timdorr  ·  3Kommentare