Réagir moderne avec Redux

Cet article se concentre sur React moderne en mettant l'accent sur l'intégration de Redux dans les applications React pour la gestion de l'état. Je couvrirai certaines fonctionnalités avancées de React telles que useCallback et les extensions VS Code utiles pour améliorer la productivité.

Points forts du concept :

1. mapStateToProps
2. mapDispatchToProps
3. Avantages de l'ajout de Redux à React
4. Redux Thunk
5. Réducteurs
6. Sélecteurs
7. Réagissez aux extraits de code dans VS Code

1. mapStateToProps

Dans Redux, mapStateToProps est une fonction qui vous permet de mapper l'état du magasin Redux aux accessoires du composant React. Cela permet aux composants d’accéder à des éléments d’état spécifiques.

Syntaxe :

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

par exemple) Dans cet exemple, mapStateToProps extrait la valeur de comptage du magasin Redux et la rend disponible en tant qu'accessoire dans CounterComponent.

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2. mapDispatchToProps

Semblable à mapStateToProps, mapDispatchToProps mappe les actions de répartition aux accessoires, permettant au composant de répartir les actions vers le magasin Redux.

Syntaxe :

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

par exemple) Dans cet exemple, mapDispatchToProps fournit incrémentCount comme accessoire à CounterComponent, lui permettant de distribuer l'action incrément() lorsqu'il est appelé.

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. Avantages de l'ajout de Redux à React

Redux peut améliorer considérablement votre application React, d'autant plus que l'application gagne en complexité. Voici les principaux avantages :

• Gestion centralisée de l'état : Redux fournit une source unique de vérité en gérant l'état dans un magasin centralisé. Cela facilite la gestion des changements d’état dans l’application et améliore la prévisibilité.

• Persistance de l'état : Redux facilite la sauvegarde et la conservation de l'état lors des rechargements ou des itinéraires de page, ce qui rend l'UX plus fluide.

• Débogage et débogage dans le temps : Redux DevTools permet un débogage avancé et vous permet d'inspecter chaque action et changement d'état, même en revenant aux états précédents pour corriger les bogues.

• Séparation des préoccupations : Redux sépare l'état de votre application de votre interface utilisateur, permettant ainsi un code plus réutilisable, maintenable et testable.

4. Redux Thunk

Redux Thunk est un middleware qui permet d'écrire des créateurs d'actions qui renvoient des fonctions au lieu d'objets d'action. Cela nous permet d'effectuer des opérations asynchrones (comme des appels API) dans les actions Redux.

Syntaxe :

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

par exemple) Dans cet exemple, fetchPosts est une action asynchrone qui récupère les données d'une API et distribue des actions en fonction du succès ou de l'échec de la requête.

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5. Réducteurs

Les

Les réducteurs sont des fonctions pures dans Redux qui prennent l'état actuel et une action comme arguments et renvoient un nouvel état basé sur l'action. Les réducteurs sont responsables de la mise à jour de l'état dans le magasin Redux.

Syntaxe :

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

par exemple) Dans cet exemple, le counterReducer gère deux actions, INCREMENT et DECREMENT, et met à jour le décompte dans l'état en conséquence.

const rootReducer = combineReducers({
  counter: counterReducer,
});

const store = createStore(rootReducer);

6. Sélecteurs

Les

Les sélecteurs sont des fonctions utilisées pour extraire ou calculer les états dérivés du magasin Redux. Ils améliorent les performances en mémorisant les résultats et fournissent une API claire pour accéder à certaines parties de l'État.

Syntaxe :

const selectCount = (state) => state.counter.count;

par exemple) Dans cet exemple, selectUserPosts est un sélecteur mémorisé qui filtre les publications en fonction de l'ID de l'utilisateur actuel. Les sélecteurs peuvent rendre votre code plus efficace en évitant les recalculs inutiles.

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. Réagissez aux extraits de code dans VS Code

Si vous codez en VS Code, l'installation de l'extension React Snippets peut considérablement accélérer votre flux de travail. Cette extension fournit des raccourcis pratiques pour créer des composants, des hooks et d'autres structures de code React courantes, aidant ainsi les utilisateurs à écrire plus rapidement du code React propre et cohérent en exploitant des modèles de code.

par exemple) Essayer rfc, rafc ou rafce suivi de la touche de tabulation générera le code suivant pour un composant fonctionnel React :

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

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!