web-dev-qa-db-fra.com

React Redux utilise HOC avec le composant connecté

Je suis au milieu de mon premier projet React Native. Je voudrais créer un HOC qui traite uniquement de la synchronisation des données d'une API. Ce serait alors envelopper tous mes autres composants.

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

export default DataSync(SomeOtherComponent);

Le concept qui me pose problème est que SomeOtherComponent dépend également de la méthode React Redux Connect pour la récupération des autres états redux. Ma question est comment puis-je utiliser les deux ensemble? Quelque chose comme ça?

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

J'ai peut-être complètement mal compris le concept ici, donc j'apprécierais vraiment quelques indications

MODIFIER

Pour expliquer plus loin:

Mon DataSync HOC se chargerait uniquement de la synchronisation des données entre l'application et constituerait le composant de niveau supérieur. Il aurait besoin d'accéder à l'état d'autorisation et définirait les données dans Redux (dans ce cas, les commandes) pour tous les autres composants.

Les composants imbriqués dans le HOC DataSync doivent avoir accès aux données extraites, aux itinéraires, puis créer un état (ordres) qui doit être synchronisé périodiquement avec le serveur.

javascriptreactjsreact-nativereduxreact-redux
9
mtwallet

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

Utilisez également connect sur vos composants enfants. Voici POURQUOI

9
free-soul

Voici un exemple simple comment cela 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 link

12
The Reason

Oui, connect est également HOC et vous pouvez les imbriquer de manière arbitraire puisqu'un HOC renvoie un composant.

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

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

5
Lyubomir

J'utilise et aime la même approche que celle mentionnée par @ The Reason. Le seul problème ici est que si vous mappez vos actions, dispatch () ne sera pas disponible.

Voici comment j'ai réussi à le faire fonctionner au cas où quelqu'un serait confronté au même problème.

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

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

Où withPreFetch(firstLoadAction, ConnectedComponentWithActions) est le HOC acceptant une action à envoyer.

0
Ventura