Table des matières
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
- Tout d'abord, jetons un coup d'œil aux actions initiées par le réducteur connecté
Créons un middleware Saga et connectons-nous à la boutique Redux
Action d'écoute
Lancer une requête Ajax
Conclusion
Maison interface Web js tutoriel Explication détaillée d'exemples de projets pratiques React (3)

Explication détaillée d'exemples de projets pratiques React (3)

Jul 24, 2017 pm 03:58 PM
react 实践 项目

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
  }
};
Copier après la connexion

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_FAILUREaction

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;
Copier après la connexion

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)
  ];
}
Copier après la connexion

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;
Copier après la connexion
  • 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));
};
Copier après la connexion
  • 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));
  }
}
Copier après la connexion

select(selector, ...args) Utilisé pour obtenir des données sur l'état du magasin
put(action) Lancer une action pour stocker
call(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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

L'IA peut-elle vaincre le dernier théorème de Fermat ? Un mathématicien a abandonné 5 ans de sa carrière pour transformer 100 pages de preuve en code L'IA peut-elle vaincre le dernier théorème de Fermat ? Un mathématicien a abandonné 5 ans de sa carrière pour transformer 100 pages de preuve en code Apr 09, 2024 pm 03:20 PM

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

Regardons de plus près PyCharm : un moyen rapide de supprimer des projets Regardons de plus près PyCharm : un moyen rapide de supprimer des projets Feb 26, 2024 pm 04:21 PM

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

Conseils pratiques PyCharm : convertir le projet en fichier EXE exécutable Conseils pratiques PyCharm : convertir le projet en fichier EXE exécutable Feb 23, 2024 am 09:33 AM

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 sur la station Dreamweaver CMS Partage de pratiques de groupe sur la station Dreamweaver CMS Mar 18, 2024 am 10:18 AM

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

Comment empêcher Outlook d'ajouter automatiquement des événements à mon calendrier Comment empêcher Outlook d'ajouter automatiquement des événements à mon calendrier Feb 26, 2024 am 09:49 AM

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

Discussion approfondie sur les principes et les pratiques du cadre Struts Discussion approfondie sur les principes et les pratiques du cadre Struts Feb 18, 2024 pm 06:10 PM

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 front-end React Intégration du framework Java et du framework front-end React Jun 01, 2024 pm 03:16 PM

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 : refuser les alternatives aux instructions Goto Pratiques de codage PHP : refuser les alternatives aux instructions Goto Mar 28, 2024 pm 09:24 PM

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

See all articles