wake-up-neo.com

Reagieren Sie Redux mit HOC mit angeschlossener Komponente

Ich bin mitten in meinem ersten React Native-Projekt. Ich möchte ein HOC erstellen, das sich ausschließlich mit dem Synchronisieren von Daten von einer API befasst. Dies würde dann alle meine anderen Komponenten einwickeln.

Wenn ich richtig liege, würde meine DataSync-Komponente alle anderen Komponenten verbessern, indem sie in der export-Anweisung Folgendes ausführt:

export default DataSync(SomeOtherComponent);

Das Konzept, mit dem ich zu kämpfen habe, ist, dass SomeOtherComponent auch von der React Redux Connect-Methode zum Abrufen eines anderen Redux-Status abhängt. Meine Frage ist, wie kann ich beide zusammen verwenden? Etwas wie das?

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

Ich habe das Konzept hier möglicherweise völlig missverstanden, daher würde ich einige Hinweise wirklich begrüßen

BEARBEITEN

Um es weiter zu erklären:

Mein DataSync-HOC würde sich ausschließlich um die Synchronisierung von Daten zwischen der App kümmern und wäre die Top-Level-Komponente. Es würde Zugriff auf den Authentifizierungsstatus benötigen und die Daten in Redux (in diesem Fall Bestellungen) für alle anderen Komponenten festlegen.

Komponenten, die im DataSync-HOC verschachtelt sind, benötigen Zugriff auf die abgerufenen Daten und Routen und erstellen wiederum einen Status (Aufträge), der regelmäßig mit dem Server synchronisiert werden muss.

9
mtwallet

Vielleicht ist es das, was Sie wollten:

DataSync.js

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

SomeOtherComponent.js

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

Verwenden Sie connect auch für Ihre untergeordneten Komponenten. Hier ist WARUM

9
free-soul

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ützliche HOC link

12
The Reason

Ja, connect ist auch HOC und Sie können sie beliebig verschachteln, da eine HOC eine Komponente zurückgibt.

HOC(HOC(...(Component)...)) ist in Ordnung.


Ich denke jedoch, dass Sie möglicherweise connect(...)(DataSync(YourComponent)) anstelle von DataSync(connect(...)(YourComponent)) benötigen, damit DataSync bei Bedarf auch auf state/props zugreifen kann. Das hängt wirklich vom Anwendungsfall ab.

5
Lyubomir

Ich benutze und mag denselben Ansatz, den @The Reason angesprochen hat. Das einzige Problem hier ist, dass wenn Sie Ihre Aktionen zuordnen, kein dispatch () verfügbar ist.

Wie ich es geschafft habe, damit es funktioniert, falls jemand das gleiche Problem hat, war das Folgende.

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

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

Wobei withPreFetch(firstLoadAction, ConnectedComponentWithActions) das HOC eine auszulassende Aktion akzeptiert.

0
Ventura