Explication détaillée des cas pratiques de projets redux-thunk

Cette fois, je vais vous apporter une explication détaillée du cas pratique du projet redux-thunk. Quelles sont les précautions à prendre pour utiliser le projet pratique redux-thunk ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Le concept de base de redux est en fait très simple : stocker l'état qui doit être modifié dans le magasin, lancer une action pour décrire ce qui s'est passé et utiliser des réducteurs pour décrire comment l'action modifie l'arborescence d'état. Lors de la création d'un magasin, vous devez transmettre le réducteur. Ce qui peut réellement modifier les données du magasin, c'est l'API store.dispatch.

1. Concept

Après avoir envoyé une action et avant d'atteindre le réducteur, vous devez utiliser un middleware pour effectuer quelques opérations supplémentaires. Vous pouvez utiliser le middleware Redux pour la journalisation, la création de rapports d'erreur, l'appel d'interfaces ou de routage asynchrones, et bien plus encore.
En d'autres termes, le middleware est une amélioration de store.dispatch()

2 Utilisation du middleware

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

Introduire directement le middleware thunk, dites-le. dans la méthode applyMiddleware et transmettez la méthode createStore pour terminer l’amélioration fonctionnelle de store.dispatch(). Autrement dit, vous pouvez effectuer certaines opérations asynchrones dans le réducteur.

3.applyMiddleware()

En fait, applyMiddleware est une méthode native de Redux, qui combine tous les middlewares dans un tableau et les exécute en séquence.

S'il y a plus de middlewares, ils peuvent être passés en paramètres dans l'ordre

const store = createStore(
  reducers, 
  applyMiddleware(thunk, logger)
);

Si vous souhaitez comprendre son évolution, vous pouvez consulter la documentation officielle de redux : https : //redux.js.org/advanced /middleware

4.redux-thunk

Analyser le code source de redux-thunk node_modules/redux-thunk/src/ index.js

function createThunkMiddleware(extraArgument) {
 return ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
   return action(dispatch, getState, extraArgument);
  }
  return next(action);
 };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

Redux-thunk middleware export default est le thunk transmis par createThunkMiddleware(). En regardant la fonction createThunkMiddleware, elle renvoie une fonction curry. Le code que nous traduisons dans ES5 est plus facile à lire

function createThunkMiddleware(extraArgument) {
  return function({ dispatch, getState }) {
    return function(next){
      return function(action){
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    }
  }
}

Avec ce look, nous pouvons voir que l'idée la plus importante de redux-thunk est qu'il peut accepter un créateur d'action qui renvoie une fonction. . Si le créateur de l'action renvoie une fonction, exécutez-la. Sinon, exécutez-la selon la prochaine (action) d'origine.

Étant donné que ce créateur d'action peut renvoyer une fonction, vous pouvez effectuer certaines opérations asynchrones dans cette fonction.

Par exemple :

export function addCount() {
  return {type: ADD_COUNT}
}
export function addCountAsync() {
  return dispatch => {
    setTimeout( () => {
      dispatch(addCount())
    },2000)
  }
}

La fonction addCountAsync renvoie une fonction, transmet la répartition comme premier paramètre de la fonction et effectue des opérations asynchrones au sein de la fonction.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser JS pour obtenir les dates des 7 derniers jours et des 3 derniers jours

Angular ng-animate et Comment utiliser ng-cookies dans le projet

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!