React-Komponente wird nicht neu gerendert nach dem Verschieben Verbindung zu anderen Datei

Question

In meiner Reagieren-App habe ich eine Komponente, die mit react-redux connect exportiert wurde.

class Test extends Component { 
... 
} 
export default connect(...)(Test) 

und mit Komponente:

<div> 
<Test /> 
</div> 

Solange ich es in der gleichen Datei allen Export funktioniert gut. Aufgrund von Testproblemen habe ich die Verbindung zu einer anderen Datei verschoben. Jetzt ist es wie: (test.js)

class Test extends Component { 
... 
} 
export default Test 

und in verschiedenen Datei (TestConnect.js):

import Test from './Test' 
... 
export default connect(...)(Test) 

und mit Komponente:

<div> 
<TestConnect /> 
</div> 

Solange ich hatte Die Component und ihre Verbindung in derselben Datei, die Requisiten änderte, führte die Test-Komponente neu aus. Jetzt ist es nicht. Könnten Sie mir bitte helfen, das zu verstehen? Wie kann ich das beheben?

bearbeiten

durch Verwendung Gelöst {rein: false} als "Optionen" in connect!

Answer 1

Es sei denn, Sie tatsächlich einen Vorteil gegenüber Fall und das ist der einzige Ausweg, wie in redux's troubleshooting section angegeben, mit {pure: false} ist nicht die beste Lösung, da redux Ihre Komponenten erwarten rein zu sein (immer die gleichen Ergebnisse produzieren, bei gleicher props und states)

Hier ist, wie ich es tun würde:

test.js

class Test extends Component { 
    ... 
    render() { ... } 
} 
export default Test 

TestContainer.js

import Test from './Test' 
import connect from 'react-redux' 

class TestContainer extends Component { 
    render() { 
    return(<Test {...this.props} /> (Don't forget to pass your props down, otherwise, Test won't work properly) 
    } 
} 

TestContainer = connect(...)(Test) 
export default TestContainer 

App.js

import TestContainer from './TestContainer' 

class App extends Component { 
    ... 
    render(){ 
    return(
     <div> 
     <TestContainer {...props (If you need to pass anything that isn't at redux store)} /> 
     </div> 
    ) 
    } 
} 

ich diesen Ansatz schon ein paar Mal in einigen Projekten verwendet haben, und es ist ziemlich gut

Wenn Sie gearbeitet‘ Re nicht in diesem Rand Fall Szenario und diese Lösung immer noch nicht funktioniert, benötigen einige weitere Informationen, um zu sehen, wo die Dinge schief gehen :)