Explication détaillée d'exemples de projets pratiques React (3)
React compte près de 70 000 étoiles sur Github et est actuellement le framework front-end le plus populaire. J'apprends React depuis un moment, et maintenant je commence à le pratiquer avec React+Redux !
La dernière fois, nous avons parlé de l'utilisation de Redux pour la gestion de l'état. Cette fois, nous utilisons Redux-saga pour gérer les opérations asynchrones des applications Redux
Projet pratique React (1)
Projet pratique React (2)
Projet pratique React (3)
- Tout d'abord, jetons un coup d'œil aux actions initiées par le réducteur connecté
export const auth = (state = initialState, action = {}) => { switch (action.type) { case LOGIN_USER: return state.merge({ 'user': action.data, 'error': null, 'token': null, }); case LOGIN_USER_SUCCESS: return state.merge({ 'token': action.data, 'error': null }); case LOGIN_USER_FAILURE: return state.merge({ 'token': null, 'error': action.data }); default: return state } };
Sagas. Décidez ensuite quoi faire en fonction de cette action : lancer un appel asynchrone (comme une requête Ajax), lancer d'autres actions vers le Store, ou même appeler d'autres Sagas.
La fonction de connexion spécifique est que lorsque nous cliquons sur la fenêtre contextuelle de connexion, une action LOGIN_USER
sera émise. Sagas surveille l'action LOGIN_USER
, lance une requête Ajax en arrière-plan et décide. pour lancer LOGIN_USER_SUCCESS
en fonction du résultat action ou LOGIN_USER_FAILURE
action
Ensuite, implémentons ce processus
Créons un middleware Saga et connectons-nous à la boutique Redux
Ajouter redux-saga
dépendances dans package.json
"redux-saga": "^0.15.4"
Modifier src/redux/store/store.js
/** * Created by Yuicon on 2017/6/27. */ import {createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga' import reducer from '../reducer/reducer'; import rootSaga from '../sagas/sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore( reducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(rootSaga); export default store;
Redux-saga utilise la fonction Générateur pour implémenter
Action d'écoute
Créer src/redux/sagas/sagas.js
/** * Created by Yuicon on 2017/6/28. */ import { takeLatest } from 'redux-saga/effects'; import {registerUserAsync, loginUserAsync} from './users'; import {REGISTER_USER, LOGIN_USER} from '../action/users'; export default function* rootSaga() { yield [ takeLatest(REGISTER_USER, registerUserAsync), takeLatest(LOGIN_USER, loginUserAsync) ]; }
On voit qu'il est surveillé dans rootSaga. Les deux actions sont la connexion et l'enregistrement.
Dans l'exemple ci-dessus, takeLatest autorise l'exécution d'une seule tâche loginUserAsync. Et cette tâche est la dernière à être lancée. Si une tâche est déjà en cours d'exécution auparavant, la tâche précédente sera automatiquement annulée.
Si nous autorisons le démarrage de plusieurs instances loginUserAsync en même temps. À un certain moment, nous pouvons démarrer une nouvelle tâche loginUserAsync, même si une ou plusieurs tâches loginUserAsync précédentes ne sont pas encore terminées. Nous pouvons utiliser la fonction d'assistance takeEvery.
Lancer une requête Ajax
Obtenir les données sur l'état du magasin
selectors.js
/** * Created by Yuicon on 2017/6/28. */ export const getAuth = state => state.auth;
api
api.js
/** * Created by Yuicon on 2017/7/4. * */ /** * 这是我自己的后台服务器,用 Java 实现 * 项目地址: * 文档:http://139.224.135.86:8080/swagger-ui.html#/ */ const getURL = (url) => `http://139.224.135.86:8080/${url}`; export const login = (user) => { return fetch(getURL("auth/login"), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user) }).then(response => response.json()) .then(json => { return json; }) .catch(ex => console.log('parsing failed', ex)); };
Créer src/redux/ sagas/users.js
/** * Created by Yuicon on 2017/6/30. */ import {select, put, call} from 'redux-saga/effects'; import {getAuth, getUsers} from './selectors'; import {loginSuccessAction, loginFailureAction, registerSuccessAction, registerFailureAction} from '../action/users'; import {login, register} from './api'; import 'whatwg-fetch'; export function* loginUserAsync() { // 获取Store state 上的数据 const auth = yield select(getAuth); const user = auth.get('user'); // 发起 ajax 请求 const json = yield call(login.bind(this, user), 'login'); if (json.success) { localStorage.setItem('token', json.data); // 发起 loginSuccessAction yield put(loginSuccessAction(json.data)); } else { // 发起 loginFailureAction yield put(loginFailureAction(json.error)); } }
select(selector, ...args)
Utilisé pour obtenir des données sur l'état du magasin put(action)
Lancer une action pour stockercall(fn, ...args)
Appeler fn Le La fonction prend des arguments comme paramètres. Si le résultat est une promesse, le middleware fera une pause jusqu'à ce que la promesse soit résolue, et le générateur poursuivra son exécution après la résolution. Ou jusqu'à ce que la promesse soit rejetée, auquel cas une erreur sera générée dans le générateur.
Documentation détaillée de l'API Redux-saga
Conclusion
J'utilise Redux-Thunk au travail, Redux-Thunk est relativement plus facile à mettre en œuvre et à entretenir. Mais pour les opérations complexes, en particulier face à des opérations asynchrones complexes, Redux-saga présente plus d'avantages. À ce stade, nous avons terminé un didacticiel d'introduction à Redux-saga. Il y a beaucoup de choses merveilleuses à propos de Redux-saga,
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds





Le dernier théorème de Fermat, sur le point d'être conquis par l'IA ? Et la partie la plus significative de tout cela est que le dernier théorème de Fermat, que l’IA est sur le point de résoudre, vise précisément à prouver que l’IA est inutile. Autrefois, les mathématiques appartenaient au domaine de l’intelligence humaine pure ; aujourd’hui, ce territoire est déchiffré et piétiné par des algorithmes avancés. Image Le dernier théorème de Fermat est une énigme « notoire » qui intrigue les mathématiciens depuis des siècles. Cela a été prouvé en 1993, et les mathématiciens ont désormais un grand projet : recréer la preuve à l’aide d’ordinateurs. Ils espèrent que toute erreur logique dans cette version de la preuve pourra être vérifiée par un ordinateur. Adresse du projet : https://github.com/riccardobrasca/flt

Titre : En savoir plus sur PyCharm : Un moyen efficace de supprimer des projets Ces dernières années, Python, en tant que langage de programmation puissant et flexible, a été privilégié par de plus en plus de développeurs. Dans le développement de projets Python, il est crucial de choisir un environnement de développement intégré efficace. En tant qu'environnement de développement intégré puissant, PyCharm fournit aux développeurs Python de nombreuses fonctions et outils pratiques, notamment la suppression rapide et efficace des répertoires de projet. Ce qui suit se concentrera sur la façon d'utiliser la suppression dans PyCharm

En tant qu'application de gestion de messagerie, Microsoft Outlook nous permet de planifier des événements et des rendez-vous. Il nous permet de rester organisés en fournissant des outils pour créer, gérer et suivre ces activités (également appelées événements) dans l'application Outlook. Cependant, des événements indésirables sont parfois ajoutés au calendrier dans Outlook, ce qui crée de la confusion pour les utilisateurs et spamme le calendrier. Dans cet article, nous explorerons divers scénarios et étapes qui peuvent nous aider à empêcher Outlook d'ajouter automatiquement des événements à mon calendrier. Événements Outlook – Un bref aperçu Les événements Outlook sont polyvalents et disposent de nombreuses fonctionnalités utiles comme suit : Intégration du calendrier : dans Outlook

PHP, Vue et React : Comment choisir le framework front-end le plus adapté ? Avec le développement continu de la technologie Internet, les frameworks front-end jouent un rôle essentiel dans le développement Web. PHP, Vue et React sont trois frameworks front-end représentatifs, chacun avec ses propres caractéristiques et avantages. Lorsqu'ils choisissent le framework front-end à utiliser, les développeurs doivent prendre une décision éclairée en fonction des besoins du projet, des compétences de l'équipe et des préférences personnelles. Cet article comparera les caractéristiques et les usages des trois frameworks front-end PHP, Vue et React.

Partage de pratiques de groupe Dream Weaver CMS Station Ces dernières années, avec le développement rapide d'Internet, la construction de sites Web est devenue de plus en plus importante. Lors de la création de plusieurs sites Web, la technologie des groupes de sites est devenue une méthode très efficace. Parmi les nombreux outils de création de sites Web, DreamWeaver CMS est devenu le premier choix de nombreux passionnés de sites Web en raison de sa flexibilité et de sa facilité d'utilisation. Cet article partagera une expérience pratique sur le groupe de stations Dreamweaver CMS, ainsi que quelques exemples de code spécifiques, dans l'espoir de fournir une aide aux lecteurs qui explorent la technologie des groupes de stations. 1. Qu'est-ce que le groupe de stations Dreamweaver CMS ? CMS Dream Weaver

Intégration du framework Java et du framework React : Étapes : Configurer le framework Java back-end. Créer une structure de projet. Configurez les outils de construction. Créez des applications React. Écrivez les points de terminaison de l'API REST. Configurez le mécanisme de communication. Cas pratique (SpringBoot+React) : Code Java : Définir le contrôleur RESTfulAPI. Code React : obtenez et affichez les données renvoyées par l'API.

Pratiques de codage PHP : refus d'utiliser des alternatives aux instructions Goto Ces dernières années, avec la mise à jour et l'itération continues des langages de programmation, les programmeurs ont commencé à accorder plus d'attention aux spécifications de codage et aux meilleures pratiques. Dans la programmation PHP, l'instruction goto existe depuis longtemps en tant qu'instruction de flux de contrôle, mais dans les applications pratiques, elle entraîne souvent une diminution de la lisibilité et de la maintenabilité du code. Cet article partagera quelques alternatives pour aider les développeurs à refuser d'utiliser les instructions goto et à améliorer la qualité du code. 1. Pourquoi refuser d’utiliser l’instruction goto ? Tout d'abord, réfléchissons à pourquoi

Golang est un langage de programmation puissant et efficace largement utilisé pour créer des services et des applications Web. Dans les services réseau, la gestion du trafic est un élément crucial. Elle peut nous aider à contrôler et à optimiser la transmission des données sur le réseau et à garantir la stabilité et les performances des services. Cet article présentera les meilleures pratiques de gestion du trafic à l'aide de Golang et fournira des exemples de code spécifiques. 1. Utilisez le package net de Golang pour la gestion de base du trafic. Le package net de Golang fournit un moyen de gérer les données réseau.
