Résumé de l'utilisation de l'architecture Redux dans les compétences ReactNative_javascript

Cet article présente principalement le résumé de l'architecture Redux utilisée dans ReactNative. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Cet article présente un résumé de l'architecture Redux utilisée dans ReactNative et le partage avec tout le monde. Les détails sont les suivants :

J'utilise Redux depuis un certain temps. Pour résumer.

Pourquoi utiliser Redux ?

Contexte :

1. L'état du RN (mutable, sous-composant invisible) et la conception de les accessoires (immuables, visibles par les sous-composants), face à des projets à grande échelle, peuvent facilement provoquer une confusion d'état en raison d'une modification accidentelle de l'état et des erreurs de rendu des composants

2. RN utilise Virtual DOM, qui n'est pas une liaison cible -> Une action est requise pour modifier les propriétés de l'interface utilisateur. Tant que l'état change, le composant dans le nouvel état est rendu et les données sont transmises dans une direction, tandis que le modèle de conception de MVC. a un flux de données bidirectionnel.

3. RN n'est pas facile à tester. Redux fournit une méthode de test simulée très pratique.

Développement Redux

Environnement de développement

1. Installer Redux : 'npm install –save redux'

2. Installer les bibliothèques de liaison React Native et Redux : npm install –save réagissent-redux

3. Installer Redux Thunk Asynchronous Action middleware  : npm install –save redux-thunk

Trois principes

Source de données unique

L'état de l'ensemble de l'application est stocké dans une arborescence d'objets, et l'arborescence d'objets existe dans un magasin unique. L'état dans le magasin est lié au composant

L'état est en lecture seule

La seule façon de changer l'état est de déclencher une action. action est un objet JS ordinaire contenant un attribut de type, qui peut représenter des événements sous forme de constantes.

Utilisez des fonctions pures pour effectuer des modifications

Écrivez des réducteurs pour décrire comment l'action correspondante modifie l'état. Généralement, vous pouvez utiliser switch(action.type) pour le gérer sans effets secondaires

Utiliser

react-redux fournit une connexion et un fournisseur.

1. Provider est le point de distribution de niveau supérieur et l'attribut est Store, qui distribue l'état à tous les composants connectés

2 connect : accepte deux paramètres : l'un est mapStateToProps. ou mapDispatchToProps, l'un est le composant lui-même à lier.

Store

Store est l'objet qui relie le Réducteur et l'action. Store a les responsabilités suivantes :

1. Maintenir l’état de l’application – similaire à une base de données, stockant tout l’état de l’application.

2. Fournit la méthode getState(). Obtenir tous les états actuels ;

3. fournit la méthode dispatch(action) pour mettre à jour l'état, ce qui équivaut à le stocker dans la base de données et à stocker l'action pour changer l'état.

4. Enregistrez l'auditeur via s'abonner (auditeur).

Store est essentiellement un objet qui enregistre l'intégralité de l'état de l'application sous la forme d'une arborescence. et fournit quelques méthodes. Par exemple getState() et dispatch().

L'application Redux n'a qu'un seul Store.

Store est créé via la méthode createStore, basée sur l'état initial du réducteur racine de l'ensemble de l'application.

Le code est le suivant :

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';//异步
import reducers from './reducers';
const Store = applyMiddleware(thunk)(createStore)(reducers);
export default Store;

Réducteurs

L'action décrit uniquement le fait que quelque chose s'est produit, et ne précise pas l'application Comment mettre à jour l'état. C'est ce que fait le réducteur.

L'essence de Réducteur est une fonction, et c'est une fonction pure. Il n'y a aucun effet secondaire. En termes simples, le Réducteur n'est responsable que d'une seule chose, qui est de modifier l'état dans le Store en fonction de l'action et de l'état reçus :

(state, action) => newState

Dans l'implémentation générale, switch(action.type) est utilisé pour juger différentes actions, et la valeur par défaut est l'ancien état. L'état initial peut également être défini.

Code :

import { combineReducers } from 'redux';
const newState = (state = {}, action = {}) => {
 switch (action.type) {
  case ActionTypes.CSTATE:
   return { ...state, ...action.state };
  case '_DPDATACHANGE_':
   return {...state, ...action.dpState};
  default:
   return state;
 }
};
//Reducer 合并
export default combineReducers({
 newState,
});

Remarque : Ce qui est renvoyé est le nouvel état. Si vous devez conserver une partie de l'ancienne valeur d'état, utilisez...state (l'objet. syntaxe d'expansion d'ES7, qui sera superficielle pour l'objet) Copiez les attributs correspondants, ce qui équivaut à Object.assign({}, state, newState)). être fusionnés. Les états complexes doivent être fusionnés manuellement.

Action

Action est un objet JS ordinaire, comprenant au moins un attribut de type représentant l'événement, et d'autres attributs peuvent être utilisés pour transmettre des données. En pratique, une fonction est définie pour un processus Le processus peut inclure des requêtes réseau et finalement renvoyer une Action. Cette fonction est appelée Action Creator.

Code : le magasin peut envoyer cette action. Le type d'action représente l'identifiant et l'état correspond aux données qu'elle transporte.

export const newState = state => {
 Store.dispatch({
  type: ActionTypes.CSTATE,
  state,
 });
};

Persistance

Lorsque l'action est déclenchée, les données sont restaurées selon sa clé de réduction, puis l'action ne doit être distribuée que lorsque l'application démarre, qui est également facilement résumé dans les services d'extension configurables. En fait, la bibliothèque tierce redux-persist a déjà fait tout cela pour nous.

Le code en action peut être le suivant :

export const getStorage = async (key) => {
 const d = await AsyncStorage.getItem(key);
 return JSON.parse(d);
};
export const setStorage = (key, value) => {
 AsyncStorage.setItem(key, JSON.stringify(value));
};

connect

Fournir la méthode getState(). Obtenez tous les états actuels

通过connect，绑定需要的state以及Action Creator到你的组件的props上，这样组件就可以通过props来调用Action Creator，或者根据不同props来render()不同的组件。

代码：

mapStateToProps({ newState }) {
      const value = newState[name];//name: newState.name
      return {
       name,
      };
     },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

相关推荐：

如何理解 redux

JavaScript技巧中关于react-redux中connect()方法详细解析

在React中使用Redux的实例详解

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!