Gestion du chargement et de l'état des données spécifiques aux composants avec Redux pour les appels d'API dans React Native

Lors de la création d'applications React Native, la gestion de l'état de chargement et des données peut devenir complexe, surtout si vous souhaitez centraliser la logique API dans Redux mais conserver un contrôle au niveau des composants sur les états temporaires, tels que chargeurs. Ici, nous explorerons une approche qui exploite Redux pour les appels d'API, tout en gardant le chargement et l'état des données isolés au sein du composant, rendant l'interface utilisateur autonome et réutilisable.

Cette approche est particulièrement bénéfique dans les situations où :

• La logique de l'API doit être centralisée pour des raisons de cohérence et de maintenabilité.
• Le composant n'a pas besoin de gestion globale des états pour les états de l'interface utilisateur tels que le chargement et l'affichage des données récupérées.

Voyons comment configurer cela.

1. Configuration de Redux Slice avec createAsyncThunk

En utilisant createAsyncThunk de Redux Toolkit, nous pouvons définir un thunk pour effectuer l'appel API. Cette fonction renvoie une promesse, permettant au composant de savoir quand l'appel est terminé et de gérer le chargeur en conséquence.

dataSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Define an async thunk for the API call
export const fetchData = createAsyncThunk('data/fetchData', async () => {
  const response = await fetch('https://api.example.com/data'); // Replace with your API
  const data = await response.json();
  return data; // Returns the fetched data to the action payload
});

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    items: [],
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.fulfilled, (state, action) => {
        state.items = action.payload; // This saves the data in Redux if needed elsewhere
      });
  },
});

export default dataSlice.reducer;

Voici ce qui se passe :

• fetchData est un outil asynchrone qui récupère les données d'une API.
• Une fois l'appel API terminé, fetchData.fulfilled est déclenché, mettant à jour l'état des éléments dans Redux si vous souhaitez stocker les données globalement. Cependant, cela n’est pas nécessaire à des fins d’affichage dans le composant lui-même.

2. Création du composant avec l'état local pour le chargement et les données

Le composant peut gérer localement le chargement et l'état des données, fournissant un contrôle sur l'indicateur de chargement et affichant les données uniquement dans ce composant.

MonComponent.js

import React, { useState } from 'react';
import { View, ActivityIndicator, Text, Button } from 'react-native';
import { useDispatch } from 'react-redux';
import { fetchData } from './dataSlice';

const MyComponent = () => {
  const [loading, setLoading] = useState(false); // Local loading state
  const [data, setData] = useState([]); // Local data state
  const dispatch = useDispatch();

  const handleFetchData = async () => {
    setLoading(true); // Start the local loader

    try {
      const resultAction = await dispatch(fetchData()); // Dispatch Redux action
      if (fetchData.fulfilled.match(resultAction)) {
        setData(resultAction.payload); // Set the data locally in the component
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false); // Stop the loader after API call completes
    }
  };

  return (
    <View>
      {loading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        data.map((item, index) => <Text key={index}>{item.name}</Text>) // Adjust based on data structure
      )}
      <Button title="Reload Data" onPress={handleFetchData} />
    </View>
  );
};

export default MyComponent;

Explication

1. État local pour le chargeur et les données :

   • le chargement et les données sont gérés au sein du composant à l'aide de useState, les gardant isolés de l'état Redux global.
   • Cela permet à chaque instance de MyComponent de gérer son propre chargeur et ses propres données sans affecter les autres parties de l'application.

2. Distribution de l'action Redux :

   • La fonction handleFetchData distribue fetchData à l'aide de Redux. Cette action renvoie une promesse, nous permettant de gérer le chargement asynchrone de manière propre.
   • Si l'action est exécutée, les données récupérées (resultAction.payload) sont définies localement sur data.

3. Affichage du chargeur et des données :

   • Pendant le chargement, un ActivityIndicator s'affiche, fournissant des commentaires à l'utilisateur.
   • Une fois les données récupérées, elles sont affichées localement dans le composant.

Pourquoi cette approche ?

Cette approche équilibre la puissance de Redux avec la gestion locale des composants, ce qui la rend hautement modulaire et flexible :

• Gestion centralisée des API : en plaçant la logique de l'API dans Redux, vous pouvez réutiliser cette action sur plusieurs composants tout en garantissant une source unique de vérité pour les appels d'API.
• Logique des composants autonomes : les composants contrôlent leurs chargeurs et l'affichage des données de manière indépendante. Cette gestion locale réduit la complexité de la gestion des états temporaires comme les chargeurs dans Redux, qui n'ont pas besoin de persister globalement.
• Réutilisabilité améliorée : les composants peuvent gérer indépendamment les appels d'API sans avoir besoin d'accessoires étendus pour le chargement ou les données, ce qui les rend plus faciles à réutiliser dans différents contextes.

Conclusion

Cette technique fournit un moyen propre et modulaire de gérer les appels d'API avec Redux tout en gardant l'interface utilisateur réactive et isolée dans chaque composant. En tirant parti des actions basées sur des promesses et de l'état local, vous prenez le contrôle des états temporaires de l'interface utilisateur tout en conservant la logique de votre API centralisée, ce qui rend votre base de code plus maintenable et évolutive.

Essayez de mettre en œuvre cette approche dans vos projets où vous avez besoin d'une gestion centralisée des API et d'un contrôle indépendant de l'interface utilisateur : c'est un excellent moyen de combiner le meilleur de Redux et de la gestion d'état locale de React !

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!