store.getState ou mapStateToProps dans le composant

Question

J'ai une question: quelle est la différence entre utiliser getState du magasin directement ou utiliser mapStateToProps. Veuillez me regarder l'exemple ci-dessous

import React, { Component } from 'react'
import store from '../store'
import { connect } from 'react-redux';

class Test extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        <h1>{this.props.count}</h1>
        <h2>{store.getState().reducer1.count}</h2>
      </p>
    )
  }
}

const mapStateToProps = (state) => ({
  count: state.reducer1.count
});

// export default Test;
export default connect(mapStateToProps)(Test);

store.getState et mapStateToProps ci-dessus fonctionnent normalement, il est toujours mis à jour en cas de changement d'état. Si nous utilisons uniquement getState, nous n'avons pas besoin d'utiliser la méthode connect.

Un autre point que j'ai reconnu est lorsque l'utilisation mapStateToProps avec connect, dans le réducteur, nous devons retourner une nouvelle copie de l'état de l'objet que retourner cet état avec modification. Sinon, le composant ne sera pas mis à jour en cas de changement d'état. Comme ça:

return Object.assign({}, state, {
        count: state.count + 1,
        payload: action.payload,
      });

Mais si nous utilisons store.getState (), nous pouvons renvoyer une nouvelle copie ou la version révisée. Comme ça:

state.count++;
state.payload = action.payload;
return state

Tout le monde sait, expliquez-moi, merci.

P/S: et similaire avec store.dispatch vs mapDispatchToProps, ces 2 fonctionneront normalement, je veux juste savoir pourquoi nous devrions utiliser mapToProps avec connect au lieu d'appeler la fonction directement depuis le magasin.

Answer 1

mapStateToProps est juste une fonction d'aide qui est vraiment utile pour gérer le projet dans un style modulaire. Par exemple, vous pouvez même placer toute la logique de connexion dans des fichiers séparés et utiliser où vous le souhaitez.

Supposons que si vous travaillez sur une application à grande échelle, alors devinez une sorte de propriétés imbriquées là-bas. En utilisant connect, vous modifiez en fait le projet, ce qui est très utile pour les développeurs qui regardent le projet.

Sinon, vous écrivez plusieurs lignes de code dans un seul fichier.

---

Un problème possible auquel vous serez confronté lors de l'utilisation directe de getState () ou dispatch (). Voir ceci post pour un peu d'aide pour le clarifier.

---

Le principal avantage de la connexion est que vous n'avez pas à vous soucier du changement d'état à l'aide de store.subscribe (), la connexion vous informera de chaque changement d'état chaque fois qu'elle recevra des mises à jour.

De plus, le concept de base de React est basé sur les accessoires et les états. L'utilisation de connect vous permet d'obtenir l'état de redux comme accessoires. En utilisant this.props :)

Et ah, je me suis souvenu à quel état j'ai accédé directement au magasin plutôt que d'utiliser connect. Dans mon projet, j'avais besoin de sauvegarder tout l'état de redux sous une forme différente quelque part et je n'ai pas besoin de le connecter à un composant. Dans ce cas, l'utilisation directe avec redux store est très simple et utile. Mais si nous essayons la même chose avec connect dans ce cas, nous aurons des difficultés.

Ainsi, je vous suggère de les utiliser dans un état séparé.

1. Utilisez connect si vous souhaitez mapper avec un composant.
2. Accédez directement au magasin redux si vous n'avez pas besoin de mapper avec le composant.

---

De plus, ce blog expliquera un peu plus: React Redux Connect expliqué

Redux Flow:

Utilisation de la connexion avec le composant react:

Pour conclure: en utilisant connect, vous utilisez le fournisseur et il permet à chaque composant enfant d'accéder au magasin en fournissant un fournisseur et en utilisant des accessoires de magasin dans le composant d'application racine.