Redux // React Component rendert zweimal nach Action-Dispatching

Ich habe ein seltsames Verhalten. Sobald ich die Socket-Verbindung zum react/redux-System hinzugefügt habe, wird meine Hauptkomponente immer neu gerendert, sobald eine nächste Aktion ausgelöst wird.Redux // React Component rendert zweimal nach Action-Dispatching

Ich habe auch das Verhalten, wenn ich wieder auf einen Navigationslink klicke (die gleiche Routing-Aktion versenden), der Compoenent auch rerenders, auch ich bleibe auf der gleichen Seite.

Könnte mir jemand hier helfen, auf den richtigen Weg zu kommen? Vielen Dank!

Einrichtung reagieren 0.15.x redux reagieren Router-v4 reagieren-Router-redux

app.jsx und App-Struktur für den Container:

class Root extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <Router history={history}> 
      <Route path="/" component={RootContainer}> 
      <IndexRoute component={HomePage} /> 
      <Route path="/start" component={StartPage} /> 
      <Route path="*" component={NotFoundPage} /> 
      </Route> 
     </Router> 
     </Provider> 
    ); 
    } 
}

RootContainer

class RootContainer extends React.Component { 

... 

    componentWillMount() { 
    this.connectToSocket(); 
    this.joinChannel(); 
    } 

    componentWillUnmount() { 
    this.socket.disconnect(); 
    } 
... 

    connectToSocket() { 
    this.socket = new Socket('/socket'); 
    this.socket.connect(); 
    this.socket.onOpen(() => { 
     this.props.connectState(); // ACTION CALL 
    }); 
    this.socket.onError((err) => { 
     this.props.disconnectState(err); // ACTION CALL 
    } 
    }

...

Minderer

Quelle

2017-03-17 radosch

Die kurze Version ist, dass etwas den Zustand Ihrer Anwendung ständig ändert. Es ist schwer zu sagen, was genau, ohne Ihren Reducer zu sehen, aber Sockets würden regelmäßig Daten senden (am Leben bleiben oder etwas anderes). Sie möchten wahrscheinlich nur den Status ändern, wenn etwas Interessantes über den Socket kommt. –

danke @RobDrimmie. Ich dachte, dass sich eine Komponente nur ändert, wenn sich der Zustand ändert, und Teile neu rendert, die neu gerendert werden müssen? P.S. Der Connected State muss dabei bleiben und ist interessant, weil wir einen Chat aufbauen. Wir möchten also die Sperrung von Benachrichtigungen und der Benutzeroberfläche, wenn die Verbindung getrennt wurde. – radosch

Sie haben Recht, dass die render() - Funktion einer Komponente nur aufgerufen wird, wenn sich der Status ändert. Da dein Name oft aufgerufen wird, ändert sich der Zustand sehr. Es ist schwierig, darüber zu spekulieren, was sich im Status ändert, ohne Ihre Socket-Handling-Funktionen oder den Reducer zu sehen. Ich spekuliere, dass alles, was mit der Steckdose zu tun hat, für den sich ständig ändernden Zustand verantwortlich ist. –

Etwas verändert sich das Geschäft Zustand. Es scheint, dass Ihre RootContainer Komponente connect Ed zu Redux ist, so dass es wahrscheinlich jedes Mal neu Rendern ist. Es gibt zwei Hauptansätze, um dies zu optimieren:

Schließen Sie nur untergeordnete Komponenten an den Status an, den sie benötigen. Redux connect Komponente höherer Ordnung wiederholt nur, wenn mapStateToProps unterschiedliche Ergebnisse erzeugt. Wenn Sie dies auf einer detaillierteren Ebene im Komponentenbaum tun, verringert sich die Anzahl der Komponenten, die bei Store-Updates neu gerendert werden müssen.

Erweitern Sie React.PureComponent für alle untergeordneten Elemente, die nicht mit Redux verbunden sind, und müssen nicht jedes Mal neu rendern, wenn ihre übergeordneten Elemente dies tun. Wenn eine Komponente der obersten Ebene neu gerendert wird, werden alle untergeordneten Elemente standardmäßig ebenfalls neu gerendert. PureComponent kann das verhindern.

Dies ist nur allgemeine Beratung, es ist schwer zu sagen, was genau Sie tun sollten, ohne mehr Struktur Ihrer App zu sehen.

Quelle

2018-02-03 23:45:01

Redux // React Component rendert zweimal nach Action-Dispatching

Antwort

Verwandte Themen