web-dev-qa-db-fra.com

Quelle est la principale différence entre l'utilisation de React-Redux Hooks et de React-Redux Connect ()?

Je suis sur le point de démarrer un projet avec React-Redux. Pour les références des API, il existe des crochets et connect (). Depuis, les hooks sont l'alternative des API de connexion. Quelle est la différence d'utiliser des hooks ou de me connecter à mon projet React-Redux.

reactjsreact-reduxreact-hooks
6
sajal shrestha

Quelle est la différence d'utiliser des hooks ou de me connecter à mon projet React-Redux

Il existe deux différences majeures:

  • Portée
    connect peut être utilisé à la fois avec les composants de classe React et les composants de fonction, tandis que les hooks ne peuvent être utilisés qu'avec les composants de fonction.

  • Performance vs simplicité
    L'utilisation des crochets est plus simple. La simplicité a un prix: vous avez moins de réglages de performances à votre disposition par rapport à connect. Ce qui est plus complexe: vous l'appelez en passant dans les options de configuration (peu ou beaucoup) et récupérez la "saveur configurée" de connect. Cette saveur est le HOC que vous appelez en passant dans votre composant pour le récupérer.

    L'une des principales options de configuration est la fonction mapStateToProps déjà mentionnée. Vous n'êtes pas obligé de l'utiliser, mais dans la plupart des cas, vous le ferez. Il existe 4 autres fonctions qui existent uniquement pour vous donner diverses possibilités d'améliorer les performances du composant que vous allez boucler en utilisant connect. Les fonctions sont appelées:
    areStatesEqual
    areStatePropsEqual
    areOwnPropsEqual
    areMergedPropsEqual

    Les 4 sont facultatifs. Vous pouvez passer en tant que les options de configuration connect soit aucune, soit certaines, soit toutes, et modifier les performances. Il convient de noter que même si vous n'en passez aucun, les implémentations par défaut de ces fonctions (qui sont en fait des assistants de performance) s'appliqueront et, par conséquent, vous obtiendrez le composant encapsulé qui est plus optimisé en termes de performances que son homologue utilisant des crochets. .

1
winwiz1

Les crochets vous permettent d'accéder directement à dispatch et à l'état de redux sans connecter le composant à l'aide de connect et les crochets ne peuvent être utilisés que dans les composants fonctionnels

Connect nous permet de lier notre composant (classe ou fonctionnel) avec redux-store,

Vous pouvez vous référer à react-redux accroche la documentation du lien this .

Il a donné différents crochets comme

useSelector à l'aide duquel nous pouvons accéder au magasin redux useDispatch renvoie dispatch fonction avec laquelle nous pouvons envoyer des actions redux

Un exemple d'utilisation des crochets redux pour un composant sera (peut l'utiliser uniquement dans les composants fonctionnels)

functions Test() {
const dispatch = useDispatch()
const count = useSelector(state => state.counter)
// If you want to dispatch a redux action using hooks then
// Assume a redux action called increaseCounter

return (
<>
<p>{count}</p>
<button onClick={() => {dispatch(increaseCounter(count + 1))}}>
ClickMe!
</button></>)
}

Si vous souhaitez obtenir le même résultat à l'aide de connect, alors (vous pouvez l'utiliser dans la classe ou les composants fonctionnels)

function Test() {
  return (
    <>
      <p>{this.props.count}</p>
      <button onClick={() => {this.props.increaseCounter(this.props.count+1)}}>Click Me!</button>
    </>
  );
}

const mapStateToProps = state => {
  return {
    count: state.counter
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ increaseCounter }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Test)
1
Sumanth Madishetty