Reagieren Redux verwenden-HOC mit der angeschlossenen Komponente

Ich bin in der Mitte meiner ersten Reagieren Nativen Projekt. Ich würde gern ein HOC, die sich rein mit der Synchronisierung von Daten von einer api. Dies würde dann wickeln Sie alle meine anderen Komponenten.

Wenn ich richtig bin meine DataSync Komponente verbessern würde alle anderen Komponenten, indem Sie die folgenden in der export-Anweisung:

export default DataSync(SomeOtherComponent);

Dem Konzept bin ich mit zu kämpfen ist, dass SomeOtherComponent hängt auch davon ab, Reagieren Redux Connect-Methode für das abrufen von anderen redux Zustand. Meine Frage ist, wie kann ich beide zusammen? So etwas wie das?

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

Vielleicht habe ich völlig falsch verstanden, das Konzept hier also ich würde wirklich zu schätzen einige Hinweise

BEARBEITEN

Weiter zu erklären:

Meine DataSync-HOC-würde rein handhaben, die Synchronisation von Daten zwischen der app und wäre die top-level-Komponente. Würde es brauchen, Zugang zu auth-Status und würden die Daten in Redux (in diesem Fall Bestellungen) für alle anderen Komponenten.

Komponenten verschachtelt die DataSync-HOC-Zugriff benötigen, um die abgerufenen Daten, Routen und diese wiederum erstellen Status (Aufträge) müssen synchronisiert werden zurück an den server in regelmäßigen Abständen.

  • yep, das sollte funktionieren
InformationsquelleAutor mtwallet | 2016-11-29
  1. 11

    Kann sein, dass das, was Sie wollte:

    DataSync.js

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

    SomeOtherComponent.js

    export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

    Verwenden connect auf Ihr Kind-Komponenten. Hier ist WARUM

    InformationsquelleAutor free-soul
  2. 12

    Hier ist ein einfaches Beispiel, wie es funktioniert

    const AppWrapper = MainComponent =>
  class extends Component{
    componentWillmount(){
      this.props.fetchSomething()
    }
    componentDidUnmount(){
      this.props.push('/')
    }
    render(){
      return (
        <div>
          {this.props.fetchedUsers === 'undefined' ? 
            <div> Do something while users are not fetched </div> :
            <MainComponent {...this.props}/>}
        </div>
      )
    }
  }



const App = ({users}) => {
  //just example, you can do whatever you want
  return <div>{JSON.stringify(users)}</div>
};

//mapStateToProps will be in HOC -> Wrapper
//mapDispatchToProps will be in HOC -> Wrapper

/* you may use DataSync as you want*/
export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App))

    Nützlich HOC link

    • Können Sie tun es mit einer connect-Dekorator statt dieser syntax?
    InformationsquelleAutor The Reason
  3. 5

    Ja, connect ist auch HOC und Sie können nest Ihnen willkürlich, da eine HOC gibt eine Komponente.

    HOC(HOC(...(Component)...)) ist OK.

    Jedoch, ich denken Sie, was könnten Sie brauchen, ist connect(...)(DataSync(YourComponent)) statt DataSync(connect(...)(YourComponent)) so dass DataSync könnte auch den Zugang state /props wenn nötig. Es kommt ganz auf den use case.

    • danke für die Antwort. Also, in Wesen, die jemals Weg, den ich verschachteln Sie Sie bestimmt die Daten, die die Komponenten Erben? Dies funktioniert genau wie jede andere Komponente Beziehung?
    • können Sie näher erläutern, ein wenig mehr auf deine Frage? DataSync nur erbt von connect, wenn es verschachtelt ist, in Verbindung. Jede verschachtelte HOC1 erbt von jeder äußeren HOC2,3,4.. über es. HOC3(HOC2(HOC1)) Jetzt HOC1 erbt von HOC2 und HOC3.
    InformationsquelleAutor Lyubomir
  4. 0

    Ich verwenden und wie Sie den gleichen Ansatz, dass @Der Grund erwähnt. Das einzige problem hier ist, dass, wenn Sie die Zuordnung der Aktionen, die Sie nicht haben, dispatch() zur Verfügung.

    Die Art und Weise, wie ich es geschafft, damit es funktioniert, falls jemand vor dem gleichen problem war das folgende.

    const ConnectedComponentWithActions = connect(
  () => { return {}; },
  { myAction },
)(ViewComponent);

export default connect(
  state => state,
  null,
)(withPreFetch(firstLoadAction, ConnectedComponentWithActions));

    Wo withPreFetch(firstLoadAction, ConnectedComponentWithActions) ist die-HOC-Annahme eine Aktion ausgelöst wird.

    InformationsquelleAutor Thiago C. S Ventura
Schreibe einen Kommentar