Introduction détaillée aux opérations asynchrones redux (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur les opérations asynchrones redux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Les bases de Redux

redux

• Par expédition (action) - > Middleware -> le réducteur traite les données -> Changer de magasin -> Utilisez Subscribe() pour surveiller les modifications du magasin et mettre à jour les vues pour gérer l'état

• Stockez tous les états dans un seul magasin. le réducteur dans l'objet

• est une fonction pure, et le fonctionnement asynchrone contient des effets secondaires dus à l'incertitude du résultat, un traitement spécial est donc nécessaire

react-redux
Composant conteneur, responsable de la gestion des données et de la logique métier, non responsable de la présentation de l'interface utilisateur
Composant d'interface utilisateur, fournit une présentation de l'interface utilisateur, sans état signifie ne pas utiliser this.state, tout les états sont fournis par this.props
Le composant conteneur est généré par connect. Chaque fois que le magasin change, connect sera appelé et reçoit deux paramètres : mapStateToProps, mapDispatchToProps
mapStateToProps, qui mappe l'état aux accessoires de. le composant UI
mapDispatchToProps, qui mappe la méthode de répartition à l'interface utilisateur. Les accessoires du composant
Le composant fournisseur utilise l'API de contenu pour transférer le magasin du niveau supérieur vers chaque couche de composant pour une utilisation par connexion

2. Middleware Redux pour le traitement asynchrone

redux-thunk
Le middleware redux-thunk permet à l'action d'être une méthode
Après avoir reçu le action, le middleware exécutera la méthode d'action et fournira le résultat au réducteur
La confusion des actions entraîne des difficultés Maintenance
redux-saga
saga écoutera les actions et effectuera des opérations d'effets basées sur sur cette action
Effects fournit des API flexibles, y compris les appels bloquants et non bloquants, l'annulation, l'attente, la course et d'autres opérations
Pratique pour isoler et effectuer des opérations asynchrones, et facile à tester

3. redux-request-async-middleware

Commençons par l'action asynchrone dans le document redux, chaque appel d'interface nécessite la distribution de trois actions de synchronisation, qui sont :
Une action qui notifie le réducteur que la demande a commencé. Pour ce type d'action, le réducteur peut changer la balise isFetching dans l'état. Cela indique à l'interface utilisateur d'afficher l'interface de chargement.
Une action qui informe le réducteur que la demande a abouti. Pour ce type d'action, le réducteur peut fusionner les nouvelles données reçues dans l'état et réinitialiser isFetching. L'interface utilisateur masquera l'interface de chargement et affichera les données reçues.
Une action qui informe le réducteur que la requête a échoué. Pour ce type d’action, le réducteur peut réinitialiser isFetching. De plus, certains réducteurs enregistreront ces informations d'échec et les afficheront dans l'interface utilisateur.
C'est-à-dire qu'une interface est initiée comme celle-ci

dispatch(fetchPostsRequest(subject));
fetch(url).then(res => {
  dispatch(fetchPostsSuccess(subject, res));
}).catch(e => {
  dispatch(fetchPostsFailure(subject, e));
})

Elle encapsule simplement cette opération dans un middleware. La particularité est :

• Toutes les requêtes asynchrones sont partagées. ces trois actions

• Utiliser le sujet pour distinguer quelle demande

• Mettre tous les résultats en magasin.requests

Code source du middleware

export const reduxRequest = store => next => action => {
  let result = next(action);
  let { type, subject, model } = action;
  let _next = action.next;
  if(type === FETCH_POSTS_REQUEST) {
    model().then(response => {
      _next && _next(response);
      store.dispatch(fetchPostsSuccess(subject, response));
    }).catch(error => {
      console.error(error);
      store.dispatch(fetchPostsFailure(subject, error));
    });
  }
  return result
};/

• Identique à redux-thunk, mettez la méthode dans l'action

• Le middleware intercepte l'action FETCH_POSTS_REQUEST et effectue un traitement asynchrone

code source du réducteur

export const requests = (state = {}, action) => {
  switch (action.type) {
    case FETCH_POSTS_REQUEST:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: true,
            state: 'loading',
            subject: action.subject,
            response: null,
            error: null,
          }
        }
      );
    case FETCH_POSTS_FAILURE:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'error',
            subject: action.subject,
            response: state[action.subject].response,
            error: action.error,
          }
        }
      );
    case FETCH_POSTS_SUCCESS:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'success',
            subject: action.subject,
            response: action.response,
          }
        }
      );
    case FETCH_POSTS_CLEAR:
      return assign({},
        state,
        {
          [action.subject]: {
            isFetching: false,
            state: 'cleared',
            subject: null,
            response: null,
            error: null,
          }
        }
      )
      return state;
  }
}

• Mettez le résultat sous la réponse du sujet, s'il est faux, mettez l'erreur informations en erreur

• isFetching indique l'état actuel de la demande

• De plus, l'état actuel est ajouté des informations sur l'état et le sujet

Encapsuler la requête

const request = (subject, model, next) => {
  _dispatch(fetchPostsRequest(subject, model, next));
  return true;
};

• Écrire une méthode pour lancer l'action FETCH_POSTS_REQUEST

• C'est-à-dire, lors de la rédaction d'une requête, vous n'avez plus à vous soucier de l'action. Vous pouvez appeler directement la méthode de requête

pour encapsuler le résultat

const getResponse = state =>
  state
  && state.response !== null
  && state.response;
 
const getLoading = (states = []) =>
  states.reduce((pre, cur) =>
    pre || (cur && cur.isFetching)
    , false)
  || false;

1. Vous pouvez obtenir les résultats et l'état de chargement de plusieurs requêtes

2. Vous pouvez continuer à encapsuler plus d'opérations ou de formats, tels que des listes

4. Résumé

1. utilise redux pour la gestion de l'état sans écrire la logique complexe de redux, minimisant ainsi la complexité de

<.>
2. convient aux projets où le front-end traite et stocke les données via des interfaces

3. L'interface est gérée par redux, tandis que le composant de vue est géré par l'état interne à traiter, tandis que l'extérieur n'expose que des interfaces simples pour les opérations, séparant la couche métier et la couche vue

4. Par rapport à la nouvelle API de contenu React 16.3, l'avantage du redux réside dans un middleware branché à chaud et un pur Comment écrire un réducteur de fonction

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!