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

AI Hentai Generator
Générez AI Hentai gratuitement.

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

PyCharm est un puissant environnement de développement intégré Python qui fournit une multitude d'outils de développement et de configurations d'environnement, permettant aux développeurs d'écrire et de déboguer du code plus efficacement. Lors du processus d'utilisation de PyCharm pour le développement de projets Python, nous devons parfois regrouper le projet dans un fichier EXE exécutable pour l'exécuter sur un ordinateur sur lequel aucun environnement Python n'est installé. Cet article explique comment utiliser PyCharm pour convertir un projet en fichier EXE exécutable et donne des exemples de code spécifiques. tête

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

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

Analyse des principes et exploration pratique du framework Struts. En tant que framework MVC couramment utilisé dans le développement JavaWeb, le framework Struts a de bons modèles de conception et une bonne évolutivité et est largement utilisé dans le développement d'applications au niveau de l'entreprise. Cet article analysera les principes du framework Struts et l'explorera avec des exemples de code réels pour aider les lecteurs à mieux comprendre et appliquer le framework. 1. Analyse des principes du framework Struts 1. Architecture MVC Le framework Struts est basé sur MVC (Model-View-Con

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
