Quelle est la relation entre réagir, redux et réagir-redux ?

Ce que cet article vous apporte concerne la relation entre réagir, redux et réagir-redux ? , a une certaine valeur de référence, les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

React

Pour certains petits projets, seuls React suffisent pour la gestion des données. Alors, quand devez-vous introduire Redux ? ? Lorsque les données pour le rendu d'un composant sont obtenues à partir du composant parent via des accessoires, elles sont généralement A --> B, mais à mesure que la complexité métier augmente, cela peut ressembler à ceci : A --> B -- > > D --> E, les données requises par E doivent être transmises de A via les accessoires, et le E --> Le composant BCD n'a pas besoin de ces données, mais il faut les transmettre, ce qui est en effet un peu désagréable, et les accessoires et rappels passés affecteront également la réutilisation du composant BCD. Ou si des composants frères souhaitent partager certaines données, il n'est pas très pratique de les transférer ou de les obtenir. Dans des situations comme celle-ci, il est nécessaire d’introduire Redux.

En fait, A ---> B ---> C ---> D ---> Dans ce cas, React peut obtenir les données sans passer d'accessoires couche par couche. . Le React-Redux qui sera discuté plus tard utilise Context pour permettre à chaque sous-composant d'obtenir les données dans le magasin.

Redux

En fait, nous voulons juste trouver un endroit pour stocker certaines données partagées. Tout le monde peut les obtenir et les modifier, c'est tout. Est-il acceptable de le mettre dans une seule variable ? Oui, bien sûr, cela fonctionne, mais c'est trop inélégant et dangereux car il s'agit d'une variable globale et peut être consultée et modifiée par n'importe qui. Elle peut être accidentellement écrasée par un ami. Si les variables globales ne fonctionnent pas, utilisez simplement des variables privées. Les variables privées ne peuvent pas être modifiées facilement. Pensez-vous immédiatement aux fermetures...

Maintenant, nous devons écrire une telle fonction, qui satisfait :

Stockage d'un objet de données
Le monde extérieur peut accéder à ces données
Le monde extérieur peut également modifier ces données
Lorsque les données changent, avertissez les abonnés

function createStore(reducer, initialState) {
 // currentState就是那个数据
 let currentState = initialState;
 let listener = () => {};
 
 function getState() {
 return currentState;
 }
 function dispatch(action) {
 currentState = reducer(currentState, action); // 更新数据
 listener(); // 执行订阅函数
 return action;
 }
 function subscribe(newListener) {
 listener = newListener;
 // 取消订阅函数
 return function unsubscribe() {
  listener = () => {};
 };
 }
 return {
 getState,
 dispatch,
 subscribe
 };
}
 
const store = createStore(reducer);
store.getState(); // 获取数据
store.dispatch({type: 'ADD_TODO'}); // 更新数据
store.subscribe(() => {/* update UI */}); // 注册订阅函数

Étapes de mise à jour les données :

Quoi : Que voulez-vous faire--- dispatch(action)
Comment : Comment le faire, le résultat de le faire--- réducteur(oldState, action) => ; newState
Alors ? : réexécutez les fonctions d'abonnement (telles que le nouveau rendu de l'interface utilisateur, etc.)
Ceci implémente un magasin et fournit un centre de stockage de données pour l'accès externe, la modification, etc. C'est l'idée principale de Redux. Par conséquent, Redux n'a aucune relation essentielle avec React et peut être utilisé normalement en combinaison avec d'autres bibliothèques. C'est juste que la méthode de gestion des données de Redux est très cohérente avec le concept de vue basée sur les données de React. La combinaison des deux rend le développement très pratique.

Maintenant que nous disposons d'un endroit sûr pour accéder aux données, comment pouvons-nous les intégrer dans React ? Nous pouvons créer un window.store = createStore(reducer) lorsque l'application est initialisée, puis obtenir des données via store.getState() si nécessaire, mettre à jour les données via store.dispatch et nous abonner aux modifications de données via store.subscribe. effectuer setState... Si vous faites cela à de nombreux endroits, ce sera vraiment écrasant, et cela n'évitera toujours pas l'inélégance des variables globales.

React-Redux

Étant donné que les variables globales présentent de nombreuses lacunes, changeons d'idée et intégrons le magasin directement dans les accessoires de niveau supérieur de l'application React. comme chaque sous-composant, il suffit d'avoir accès aux accessoires de haut niveau, comme celui-ci :

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

React fournit justement un tel hook, Context, et son utilisation est très simple. en regardant la démo officielle. Maintenant que chaque sous-composant peut facilement accéder au magasin, l'étape suivante consiste pour le sous-composant à extraire les données utilisées dans le magasin, à les modifier et à s'abonner pour mettre à jour l'interface utilisateur, etc. Chaque sous-composant doit refaire cette opération. Évidemment, il doit exister un moyen plus pratique : des composants d'ordre supérieur. En encapsulant store.getState(), store.dispatch et store.subscribe via des composants d'ordre élevé, les sous-composants n'ont aucune connaissance du magasin. Les sous-composants utilisent normalement des accessoires pour obtenir des données et des rappels pour déclencher des rappels, ce qui équivaut au. existence d'aucun magasin.

Ce qui suit est l'implémentation approximative de ce composant d'ordre élevé :

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 组件加载完成后订阅store变化，如果store有变化则更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 组件销毁后，取消订阅事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
   {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}
使用connect的时候，我们知道要写一些样板化的代码，比如mapStateToProps、mapDispatchToProps这两个函数：


const mapStateToProps = state => {
 return {
 count: state.count
 };
};
 
const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Child);
 
// 上述代码执行之后，可以看到connect函数里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />
 
// 就变成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />

// De cette façon, les accessoires du composant enfant Child ont deux attributs supplémentaires, count et dispatch

// count peut être utilisé pour afficher l'interface utilisateur, et dispatch peut être utilisé pour déclencher des rappels

Alors, est-ce que ça va ? D'ACCORD. Générez un magasin de centre de données via une fermeture, puis liez ce magasin aux accessoires de niveau supérieur de React. Le sous-composant établit une connexion avec le magasin props.store de niveau supérieur via HOC, puis obtient des données, modifie les données et. met à jour l'interface utilisateur. Ici, nous parlons principalement de la façon dont les trois sont connectés ensemble. Si vous souhaitez connaître des fonctions plus avancées, telles que le middleware redux, le fractionnement du réducteur, d'autres paramètres de connexion, etc., vous pouvez jeter un œil au code source correspondant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!