Explication détaillée de l'utilisation de React, Redux et React-Redux

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de React, Redux et React-Redux. Quelles sont les précautions lors de l'utilisation de React, Redux et React-Redux. Voici des cas réels. , jetons un coup d'oeil.

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 récupérer et les modifier, c'est tout. Est-il acceptable de le mettre dans une seule variable ? OK, bien sûr, cela fonctionne, mais c'est trop inélégant et pas sûr car c'est une variable globale à laquelle tout le monde peut accéder et modifier. Elle pourrait ê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 :

1. Stocker une donnéeObjet

2. Le monde extérieur peut accéder à ces données

3. Le monde extérieur peut également modifier ces données

4. Avertir les abonnés lorsque les données changent

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 pour mettre à jour les données :

1. Quoi : Que voulez-vous faire --- dispatch(action)

2. Comment : Comment le faire, le résultat de le faire --- réducteur(oldState, action) => ; newState

3. Alors ? : réexécutez la fonction d'abonnement (telle que le nouveau rendu de l'interface utilisateur, etc.)

De cette façon, un magasin est implémenté et des données sont fournies. Le centre de stockage peut être consulté, modifié, etc. par des parties externes. 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, à condition que chaque sous-composant puisse accédez aux accessoires de niveau supérieur. , par exemple :

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

React fournit simplement un tel hook, Context, et son utilisation est très simple. Jetez un œil à la démo officielle pour comprendre. 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 une 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;
 };
}

Lors de l'utilisation de connect, nous savons écrire du code passe-partout, tel que les deux fonctions mapStateToProps et 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}
 />
// 这样，子组件Child的props里面就多了count和dispatch两个属性
// count可以用来渲染UI，dispatch可以用来触发回调

So，这样就OK了？OK了。 通过一个闭包生成一个数据中心store，然后把这个store绑定到React的顶层props里面，子组件通过HOC建立与顶层props.store的联系，进而获取数据、修改数据、更新UI。 这里主要讲了一下三者怎么窜在一起的，如果想了解更高级的功能，比如redux中间件、reducer拆分、connect的其他参数等，可以去看一下对应的源码。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

判断上传图片类型与大小需要哪些步骤

vue配置请求本地json数据需要哪些步骤

vue里$emit有哪些用法

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!