Ich bin ein Neuling in React Native. Ich benutze Redux Architektur für meine reagieren native App, aber ich bin mit einem Problem aufgrund globalen Speicherzustand von Redux konfrontiert.React Native - Redux: Mehrere Instanzen desselben Status in App
Angenommen, zum Beispiel Während vorwärts in der App gehe ich wie folgt navigieren. 
Während zurück navigierenden,
Nach redux Architektur, es ändert den Zustand jeder Instanz der Seite in dem Navigationsstapel mit dem neuesten Stand in der Geschäft.
Hier ist der Code für das obige Beispiel ist,
Page.js [Komponente]
class Page extends Component{
componentWillMount(){
}
render(){
var {image,apiCall} = this.props;
return (
<View>
<Image Source={{uri:image}} style={{// style for the image}}>
</View>
)}
componentDidMount(){
this.props.apiCall(this.props.route.data.link); // this.props.route.data.link -> this is just a link for // the apiCall
}
componentWillReceiveProps(){
}
shouldComponentUpdate(nextProps, nextState){
if(this.props.image==nextProps.image){
return false;
}
return true;
}
componentWillUpdate(){
}
componentDidUpdate(){
}
componentWillUnmount(){
}
}
const mapStateToProps = (state) => {
return {
image: state.PageDataReducer.image
};
};
const mapDispatchToProps = (dispatch) => {
return {
apiCall: (link) => {
dispatch(fetchProduct(link)); // fetchProduct() -> is a function which fetches the product from the // network and dispatches the action.
},
};
};
export default connect(mapStateToProps,mapDispatchToProps)(Page);
fetchProduct() [Ein Funktionsprodukt holen]
export function fetchProduct(link) {
return function(dispatch){
// fetches the product over network
dispatch(fetchedProduct(productLink));
}
}
abgerufen Artikel [Action]
export const fetchedProduct = (productLink) => {
return {
type: FETCHED_PRODUCT,
image: image
};
};
PageDataReducer [Reducer]
export default function PageDataReducer(state = initialState, action) {
switch (action.type) {
case FETCHED_PRODUCT:
var newState = {
...state,
image: action.image
};
return newState;
default:
return state;
}
}
Meine Beobachtung: Immer dann, wenn gleiche Seite in der Navigation auftritt, und der Zustand, in dem Laden dieser Seite wird dann ändern ruft mapStateToProps() dieser Seite auf, wie oft sich die Seite im Navigationsstapel befindet. Und daher wiederholt es die Lebenszyklusmethoden dieser Seite, um den Status entsprechend dem letzten Status zu ändern.
In diesem Beispiel, wenn ich Klick auf der Banane in der Schublade, es ändert den Zustand von Mango Banane in dem Laden und mapStateToProps() 3-mal aufgerufen wird (weil die Seite 3 mal vorhanden ist in der Navigation Stapel) und damit alle Lifecycle-Methoden der Reaktion von ComponentWillReceiveProps() auf ComponentDidUpdate() wird 3 Mal aufgerufen, nur um den Zustand dieser Seite gemäß dem neuesten Stand zu ändern.
Was ich will: Ich möchte den unterschiedlichen Zustand der Seite in der Navigation, So dass während ich zurück gehe kann ich alle verschiedenen Produkte sehen, die ich besucht habe.
Das Problem ist offensichtlich nach Redux-Architektur, aber ich bekomme nicht den Trick, es zu lösen. Jede Hilfe oder jede andere Arbeit um mein Ziel zu erreichen würde sehr geschätzt werden.
Können Sie Ihre Frage klären? –
@DamenLeroux, ja Ich habe meine Frage oben bearbeitet. Kannst du es bitte noch einmal durchgehen? –
Sie haben gesagt: "Gemäß der Redux-Architektur ändert sich der Status jeder Instanz der im Navigationsstapel vorhandenen Seite mit dem neuesten Stand im Geschäft." Die redux-Architektur macht das nicht ohne Code, um jeden App-Status irgendwo zu speichern. Vielleicht ist es hier dein Problem –