Update Route und Redux State-Daten zur gleichen Zeit

Question

Ich habe eine App, die Benutzerprofile hat. Auf dem Benutzerprofil gibt es eine Liste von Freunden, und wenn Sie auf einen Freund klicken, sollte er Sie zu diesem anderen Benutzerprofil führen.

Wenn ich derzeit klicke, um zum anderen Profil zu navigieren (über den Link redux-router), wird die URL aktualisiert, das Profil wird jedoch nicht aktualisiert oder die neue Route wird wiedergegeben.

Hier ist ein vereinfachtes Code-Snippet, ich habe der Einfachheit halber eine Menge Code herausgenommen. Es gibt einige weitere Ebenen darunter, aber das Problem tritt auf der obersten Ebene in meinem Profilcontainer auf. Wenn ich die Property userId für ProfileSections aktualisieren kann, wird sich alles ausbreiten.

class Profile extends Component { 

    componentWillMount() { 
    const { userId } = this.props.params 

    if (userId) { this.props.getUser(userId) } 
    } 

    render() { 
    return <ProfileSections userId={user.id} /> 
    } 
} 

const mapStateToProps = ({ user }) => { 
    return { user } 
} 

export default connect(mapStateToProps, { getUser })(Profile); 

Wie Sie sehen können, was passiert ist, dass ich die getUser Aktion auf componentWillMount, leite die nur einmal geschehen wird, und ist der Grund, warum die Route ändert aber die Profildaten nicht aktualisiert.

Wenn ich es zu einem anderen Lebenszyklus-Hook wie componentWillUpdate ändern, um die getUser-Aktion auszuführen, bekomme ich eine endlose Schleife von Anforderungen, weil es den Status aktualisieren und dann Komponente aktualisieren wird.

Ich habe auch versucht, die onEnter Hook von React-Router auf Route-Komponente zur Verfügung gestellt, aber es feuert nicht beim Navigieren von einem Profil zum anderen, da es die gleiche Route ist, so dass es nicht funktioniert.

Ich glaube, dass ich darüber falsch nachdenke und nach einer Anleitung suche, wie ich mit dieser Situation umgehen kann, wenn ich von einem Profil zum nächsten navigiere, während die Daten im Redux-Speicher gespeichert sind.

Answer 1

So würde ich vorschlagen, Sie nähern sich dies auf folgende Weise:

class Profile extends Component { 
    componentWillMount() { 
    const { userId } = this.props.params 

    if (userId) { 
     // This is the initial fetch for your first user. 
     this.fetchUserData(userId) 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    const { userId } = this.props.params 
    const { userId: nextUserId } = nextProps.params 

    if (nextUserId && nextUserId !== userId) { 
     // This will refetch if the user ID changes. 
     this.fetchUserData(nextUserId) 
    } 
    } 

    fetchUserData(userId) { 
    this.props.getUser(userId) 
    } 

    render() { 
    const { user } = this.props 

    return <ProfileSections userId={user.id} /> 
    } 
} 

const mapStateToProps = ({ user }) => { 
    return { user } 
} 

export default connect(mapStateToProps, { getUser })(Profile); 

Bitte beachte, dass ich es so in der componentWillMount Lifecycle-Verfahren eingerichtet haben, machen Sie die Anforderung für die erste userId. Der Code in der componentWillReceiveProps-Methode überprüft, ob eine neue Benutzer-ID empfangen wurde (was beim Navigieren zu einem anderen Profil der Fall ist), und ruft die Daten ggf. erneut ab.

Sie können prüfen, componentDidMount und componentDidUpdate statt componentWillMount und componentWillReceiveProps jeweils für die fetchUserData Anrufe verwenden, aber es könnte auf Ihren Anwendungsfall abhängen.