Qu'est-ce que réagir-dva ?

Dans React, dva est une solution de flux de données basée sur Redux et Redux-saga. Afin de simplifier l'expérience de développement, dva intègre également React-Router et Fetch, il peut donc également être compris comme. un cadre d'application léger.

• Cette méthode convient à toutes les marques d'ordinateurs.

introduction de dva

adresse du site officiel de dva : https://dvajs.com/

dva est un framework d'application d'une seule page lancé par Ant Financial, qui encapsule Redux, React-Router et Redux-Saga au niveau supérieur. redux-saga est un middleware utilisé pour gérer les opérations asynchrones des applications redux. redux-saga rassemble toute la logique des opérations asynchrones en un seul endroit pour un traitement centralisé en créant des sagas. Il peut être utilisé pour remplacer le middleware redux-thunk

<.>
• Cela signifie que la logique d'application existera à deux endroits
  (1) le réducteur est responsable du traitement des mises à jour des actions
  (2) les sagas sont responsables de la coordination des complexes ou opérations asynchrones

• Les sagas sont créées via la fonction générateur

• Les sagas peuvent être considérées comme des processus s'exécutant en arrière-plan. Sagas écoute l'action initiée, puis décide quoi faire en fonction de cette action (par exemple : s'il faut lancer une requête asynchrone, lancer d'autres actions vers le magasin, ou appeler d'autres sagas, etc.

• Parce qu'en utilisant la fonction générateur, redux-saga vous permet d'écrire du code asynchrone de manière synchrone

Le projet React introduit Dva

Introduction

Statut du projet : nw.js + réagir + redux + antd (application client)
• Cible : redux - > dva

Préparer

• Première installation de dva (version actuelle 2.4.1)

  
  npm install dva —save

• Référez-vous à la documentation officielle, le projet de transformation est en mode dva, ajoutez ou modifiez le fichier d'entrée sous src

  index.js

import dva from ‘dva’;
import createHistory from ‘history/createHashHistory’;

//1.Initialize
const app = dva({
history: createHistory(),
});

//2.Plugins
//app.use({});

//3.Model
//app.model(require(‘./models/app’).default);

//4.Router
app.router(require(‘./router’).default);

//5.Start
app.start(‘#root’);

puis ajoutez-le dans le même répertoire. Fichier de routage
3. router.js

import React from ‘react’;
import { Router, Route, Switch } from ‘dva/router’;

import App from ‘./containers/App’;
import{ Account, Articles, Channels, Editor } from ‘./containers’;
const { ArticleList } = Articles;

const RouterConfig = (({ history }) => (
	<routerhistory>
		<switch>
			<route>
				<indexroute></indexroute>
				<route></route>
				<route></route>
				<route></route>
				<route></route>
			</route>
		</switch>
	
));

export default RouterConfig;</routerhistory>

Description : Le composant d'application est le composant conteneur de la page entière, y compris le menu, l'en-tête, le pied de page et certaines parties communes. pour correspondre à l'itinéraire correspondant, accédez à chaque page de sous-composant, la configuration du routage doit donc être écrite sous forme imbriquée

Pour plus de configuration de routage, veuillez vous référer à la documentation officielle de React-Router

À ce stade. , le mode dva le plus simple a été configuré. Définissez le modèle et le réducteur dans le composant correspondant et connectez-vous dans la page, vous pouvez ensuite utiliser dva pour gérer le statut

Problème résoluRedémarrez le projet une fois la configuration terminée. Vérifiez l'effet de la page comme suit :

Il s'avère que la partie conteneur est rendue avec succès, mais la page correspondant au sous-projet. -route (la valeur par défaut est Account) n'est pas rendue. En regardant à nouveau la console, une erreur est signalée

1. Tout d'abord, il y a un message d'avertissement :

Warning: Please use `require(“history”).createHashHistory` instead of `require(“history/createHashHistory”)`. Support for the latter will be removed in the next major release.

Trouvez le même problème dans. dva, et suivez les instructions pour le changer au format suivant

const createHistory = require(‘history’).createBrowserHistory;

2. Il s'agit ensuite d'un avertissement concernant les problèmes de routage :

Warning: You should not use <route> and <route> in the same route; <route> will be ignored</route></route></route>

React-router 4.0 et supérieur. Les versions ne recommandent plus d'utiliser le routage imbriqué comme indiqué ci-dessous.

<route>
	<route></route>
</route>

correspond au passage direct à l'imbrication de composants (notez que / doit être ajouté au chemin du sous-routage

<app>
	<route></route>
</app>

). Après l'avoir modifié, ces deux avertissements disparaîtront.

3. Logiquement, le composant Compte sera affiché par défaut à la saisie de l'application (car IndexRoute est configuré), et lorsque le fichier est modifié et que la page est affichée. rafraîchie, la page signale directement une erreur, comme suit :

Par Cette supposition est qu'il y a un problème avec la configuration du routage de la page J'ai recherché des informations pertinentes (react-filling. les pièges du rapport d'erreurs de React-Router après l'actualisation) et j'ai découvert que cela s'est avéré être un problème lors de l'utilisation de BrowserHistory

dans dva, donc je change directement BrowserHistory en

HashHistory.

//const createHistory = require(‘history’).createBrowserHistory;
const createHistory = require(‘history’).createHashHistory;

Redémarrez le projet, essayez de changer d'itinéraire et constatez que tout est normal.

Vous pouvez modifier dva dans la page plus tard. L'utilisation du modèle et du réducteur dans dva est relativement simple, essayez-le selon le document, je ne les décrirai pas un par un ici. .

Résumé

Résumer plusieurs problèmes rencontrés lors de l'introduction de dva dans le projet. La méthode d'écriture

génère un avertissement

• import createHistory from ‘history/createHashHistory’;

  L'utilisation de
provoque l'échec de l'actualisation de la page.

• createHashHistory

  Problème avec la configuration du routage imbriqué.

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!