Réagir Redux utilisation HOC avec le composant connecté

Je suis au milieu de ma première Réagir Natif de projet. Je voudrais créer un HOC qui traite uniquement avec la synchronisation des données à partir d'une api. Ce serait alors de l'emballage de tous mes autres composants.

Si je suis bon mon DataSync composant permettrait d'améliorer tous les autres composants en procédant comme suit dans la déclaration d'exportation:

export default DataSync(SomeOtherComponent);

Le concept, je suis mal, c'est que SomeOtherComponent dépend aussi de Réagir Redux méthode de connexion pour récupérer d'autres redux de l'état. Ma question est comment puis-je utiliser les deux ensemble? Quelque chose comme ceci?

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

J'ai peut-être complètement mal compris le concept ici, donc je voudrais vraiment l'apprécier certains pointeurs

MODIFIER

D'expliquer davantage:

Mon DataSync HOC serait purement gérer la synchronisation des données entre l'application et ce serait le top niveau de la composante. Il aurait besoin de l'accès à l'authentification de l'état et les données dans Redux (dans ce cas les commandes) pour tous les autres composants.

Composantes imbriquées à l'intérieur des DataSync HOC ont besoin d'accéder aux données récupérées, les routes et à leur tour, créer de l'état (décrets), qui doivent être synchronisés sur le serveur périodiquement.

yep, cela devrait fonctionner

OriginalL'auteur mtwallet | 2016-11-29

  1. 9

    Peut-être que c'est ce que tu voulais:

    DataSync.js

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

    SomeOtherComponent.js

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

    Utilisation connect sur votre enfant aussi bien des composants. Voici POURQUOI

    OriginalL'auteur free-soul

  2. 12

    Voici un exemple simple comment il fonctionne

    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))

    Utile HOC lien

    Vous pouvez le faire avec un connect décorateur au lieu de cette syntaxe?

    OriginalL'auteur The Reason

  3. 5

    Oui, connect est également HOC et vous pouvez imbriquer arbitraire depuis un HOC retourne un composant.

    HOC(HOC(...(Component)...)) est OK.

    Cependant, je pense que ce que vous pourriez avoir besoin est connect(...)(DataSync(YourComponent)) au lieu de DataSync(connect(...)(YourComponent)) de sorte que DataSync pourrait également avoir accès à state /props si nécessaire. Cela dépend vraiment du cas d'utilisation.

    merci pour la réponse. Donc, en substance, qui n'ait jamais la façon dont je les imbriquer détermine les données les composants d'hériter? Cela fonctionne exactement comme n'importe quel autre composant de la relation?
    pouvez-vous élaborer un peu plus sur votre question? DataSync seulement hérite de se connecter si elle est imbriquée dans connect. Chaque imbriquée HOC1 hérite de tous les extérieurs HOC2,3,4.. au-dessus d'elle. HOC3(HOC2(HOC1)) Maintenant HOC1 hérite de HOC2 et HOC3.

    OriginalL'auteur Lyubomir

  4. 0

    Que j'utilise et que la même approche que @La Raison mentionnée. Le seul problème ici est que si vous mappez vos actions, vous n'aurez pas de dispatch() disponible.

    La façon dont j'ai réussi à le faire fonctionner dans le cas où une personne est confrontée au même problème était le suivant.

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

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

    Où withPreFetch(firstLoadAction, ConnectedComponentWithActions) est le HOC à l'acceptation d'une action à être expédiés.

    OriginalL'auteur Ventura