Comment utiliser l'architecture Redux dans ReactNative

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 Target Binding->Action, est requis 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 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 le middleware d'action asynchrone Redux Thunk : npm install –save redux-thunk

Trois principes

Source de données unique

pour l'ensemble de l'application L'état est stocké dans une arborescence d'objets, qui 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, et l'autre 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 comment l'application met à 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

Généralement implémenté À l'heure actuelle, différentes actions sont jugées via switch(action.type), 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 (syntaxe d'expansion d'objet ES7, les propriétés correspondantes de l'objet seront copiées superficiellement, ce qui équivaut à Object.assign({}, state, newState)), et si vous fusionnez l'état, un seul calque sera fusionné et 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 renvoie finalement 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 tout l'état actuel

Grâce à la connexion, liez l'état requis et Action Creator aux accessoires de votre composant, afin que le composant puisse appeler Action Creator via des accessoires, ou render() différemment en fonction de différents composants d'accessoires.

Code :

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter l'affichage caché dans Angular

Comment implémenter des invites de texte sensibles dans Angular

Comment l'implémenter dans Ordre angulairePar tri et requête floue

Comment obtenir le keyCode du clavier en javascript

vue vuex vue-rouert permission Routing (tutoriel détaillé )

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!