mehr Instanzen gleichen Zustand in React-native

Question

Ich habe Komponente, wo ich mein Benutzerprofil Seite zeigen. Innerhalb dieser Komponente habe ich einen Knopf. Wenn Sie auf diese Schaltfläche klicken, wird eine Aktionsfunktion verwendet, um eine andere Komponente mit meinen Followern anzuzeigen.

Innerhalb der Komponente mit meiner Anhänger Liste, kann ich auf jeden Follower klicken und öffnen Sie sein Profil mit der Komponente Benutzerprofil und zeigen diese Info Gefolgsmann und sein Profil. Alles funktioniert richtig, bis ich zurückklicke. Dann sehe ich eine Liste von Anhängern, die nicht zu mir gehört, aber zu dem Profil gehört, von dem ich gerade zurückgekickt habe.

Da die Reduzierungen um den Zustand zu umschreiben sind, wer ich bin gerade betrachten, wenn ich von anderen Benutzern Anhänger Seite und klicken Sie auf ein anderes Volk, sehe ich das gleiche Verhalten. Ich denke, ich muss die vorherige Liste und das vorherige Profil des vorherigen Benutzers speichern, oder vielleicht etwas wie den vorherigen Zustand im Reducer kopieren, aber ich weiß nicht wie.

ich Wilddog für meinen Backend bin mit, die Firebase ähnlich ist, aber für China. Ich habe alle meine Dateien an den unten verlinkten GIST angehängt.

Es scheint, wie die Lösung klar sein sollte, aber ich bin nicht immer den Trick, es zu lösen.

https://gist.github.com/myfailemtions/0c4b79fef1aa5e6d67d3f828717474f5

Answer 1

Es mir mit dem Problem, wie der Code sieht möglicherweise die folgende sein:

class Followers extends Component { 

    componentWillMount() { 
    const {uid} = this.props.user; 
    this.props.followersFetch({uid}); 
    this.createDataSource(this.props) 
    } 

    componentWillReceiveProps(nextProps) { 
     this.createDataSource(nextProps) 
    } 

    // ..omitted 

} 

Es sieht aus wie Sie eine aktualisierte Liste sind holen, wenn die Komponentenhalterungen, aber zu vergessen, wenn Die Requisiten sind aktualisiert. Hinzufügen von this.props.followersFetch(nextProps({this.props.user.uid}); zu Ihrem componentWillReceiveProps wird wahrscheinlich den Fehler beheben.

Wenn Sie besorgt über mehrere Anrufe an den Server zu machen, Sie gehen caching in Minderer implementieren zu müssen. Ihr Code-Snippet zeigt gerade an, dass Sie Ihren gesamten Status (?!) Mit Ihrem Follower Fetch überschreiben - was wahrscheinlich nicht das ist, was Sie wollen. Wenn Sie nur in einen früheren Zustand zurückkehren möchten, ist das Speichern Ihres Status mit einer Bibliothek wie Immutable.js möglicherweise das, wonach Sie suchen.

EDIT

Eine schnelle und schmutzige Änderung Ihrer bestehenden Aktion vorherigen Zustände zu speichern. Auf diese Weise müssen die meisten Ihrer Ansichten refactoriert werden, da nicht mehr alle vom Reduzierer verwalteten Status gelöscht werden, wenn Sie Ihre Follower abrufen.

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
     case FOLLOWING_FETCH: 
      //Following lines updates state, rather than rewrites it 
      return { 
        ...state, 
        cachedFollowers: state.cachedFollowers.push(action.payload) 
       }; 
     default: 
      return state 
    } 
}; 

Warnung: der obige Code ist nicht getestet