2016-07-30 13 views
0

Ich arbeite an einer React/Redux/Thunk/React Router-Anwendung und es scheint, dass der Status bei jedem Rendern einer Komponente unerwartet in den Standardzustand für jeden Reduzierer zurückkehrt.Der Status scheint jedes Mal auf den Standard zurückzusetzen, wenn eine Komponente rendert

Zum Beispiel:

ich auf die Homepage Route zu finden, machen die Homepage Komponente und Zustand richtig eingestellt ist - Der neue Status in der Ausgabe von loggerMiddleware wie erwartet zeigt und die Anwendung funktioniert wie erwartet.

Wenn ich dann zu einer anderen Route blättern und eine EventPage-Komponente rendern, ist es als wäre der Status leer/Standard - das state Argument in mapStateToProps ist einfach eine Liste leerer Objekte, als ob ich die Standardausgabe sehen würde von Mähdreschern. Ich sehe das Gleiche in der Ausgabe von loggerMiddleware. Wenn ich wieder zur Homepage-Komponente zurück blicke, ist der Status wieder leer/Standard.

Meine Erwartung ist, dass der Zustand zwischen Seitenaufrufen/Komponentenrendern bleiben würde. Ist das korrekt?

Einige Auszüge aus der Anwendung in Frage, falls es keine Fehler bei der Identifizierung hilfreich ist ich mache - Happy mehr als gut zu bieten:

Den Boden des Eventpage und Homepage-Komponenten/Behälters:

export default connect(mapStateToProps, mapDispatchToProps)(HomePage); 

export default connect(mapStateToProps, mapDispatchToProps)(EventPage); 

Der Router wie in index.js

ReactDOM.render(
    <Provider store={store}> 
     <Router history={browserHistory} > 
      <Route path="/" component={HomePage}/> 
     <Route path="EventsSimpleList" component={EventsSimpleList}/> 
      <Route path="events/:eventId" component={EventPage}/> 
     </Router> 
    </Provider> 
    , document.querySelector('#root')); 

Meine rootReducer Definition definiert:

+2

Ihre Erwartungen sind richtig, wir müssen mehr Code sehen. Vielleicht rufst du 'createStore' mehr als einmal an? oder sogar ReactDom.render mehr als einmal? vielleicht ändern Zustand in Reducer? – azium

+0

@azium, ich fand eine Antwort auf eine andere Frage bei http://stackoverflow.com/a/34813184/479891, die besagt, dass "Es gibt keine Möglichkeit, wie Ihr Geschäft zwischen zwei verschiedenen HTTP-Anforderungen gespeichert werden kann." Wenn ich richtig verstehe, scheint dies mit Ihrem Kommentar zu kollidieren, dass meine Erwartung richtig ist, dass "Zustand zwischen Seitenaufrufen/Komponentenrendern bestehen bleibt". Vielleicht ist das Verhalten, das ich in dieser Frage beobachte, zu erwarten? –

+0

Diese Antwort sagt ausdrücklich, dass die Reparatur React Router ist, was Sie tun. Wenn Sie einen clientseitigen Router verwenden, laden Sie das JavaScript, mit dem Ihr Geschäft erstellt wird, nicht erneut, sodass es über Routen hinweg bestehen bleibt. Das Problem ist an anderer Stelle in Ihrem Code. Wie servieren Sie die App? Durch Webpack Dev-Server oder Express? Passiert das sowohl bei Dev als auch bei Prod? – azium

Antwort

0

Ich habe das Problem behoben, indem <a> Elemente durch <Link> Elemente wie aus react-Router importiert ersetzt. Dies löst das Problem nicht, wenn ein Benutzer manuell eine neue URL in seine Adressleiste eingibt, aber das Problem im Falle von Links löst. Ich glaube, das ist eigentlich erwartetes Verhalten. Ich bin zuversichtlich, dass mich jemand korrigieren wird, wenn ich mich irre.

+1

Ahh ja macht Sinn. Sie können das manuell eingegebene URL-Problem beheben, indem Sie localstorage verwenden (wenn Sie dies unterstützen müssen). Wenn Sie dies tun, werfen Sie einen Blick auf die Bibliothek redux-persist. – azium