Méthodes pour migrer la base de données vers SQL Server à l’aide d’EF Core dans la bibliothèque de classes .NET Core_Conseils pratiques

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. Amis intéressés par .NET, veuillez suivre l'éditeur pour y jeter un œ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

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, 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'état des mises à jour de l'application. 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 : Le nouvel état est renvoyé, si Vous devez conserver certaines anciennes valeurs d'état, utiliser...state (syntaxe d'expansion d'objet d'ES7, les propriétés correspondantes de l'objet seront copiées superficiellement, ici c'est équivalent à Object.assign({}, state, newState)), et si vous fusionnez l'état, il ne sera fusionné qu'une seule couche, 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

Restaurée en fonction de sa clé réductrice lorsque l'action est déclenchée Les données, puis il suffit de distribuer les actions au démarrage de l'application. Cela peut également être facilement résumé dans un service d'extension configurable. 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));
};

se connecter

Pass - Fournit 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!