Umgang mit komponentenspezifischem Laden und Datenstatus mit Redux für API-Aufrufe in React Native

Beim Erstellen von React Native-Anwendungen kann die Verwaltung des Ladezustands und der Daten komplex werden, insbesondere wenn Sie die API-Logik in Redux zentralisieren, aber die Kontrolle über temporäre Zustände auf Komponentenebene beibehalten möchten, z Lader. Hier untersuchen wir einen Ansatz, der Redux für API-Aufrufe nutzt und gleichzeitig den Lade- und Datenstatus innerhalb der Komponente isoliert hält, wodurch die Benutzeroberfläche eigenständig und wiederverwendbar wird.

Dieser Ansatz ist besonders nützlich in Situationen, in denen:

• Die API-Logik sollte aus Gründen der Konsistenz und Wartbarkeit zentralisiert sein.
• Die Komponente benötigt keine globale Statusverwaltung für UI-Status wie das Laden und die Anzeige abgerufener Daten.

Sehen wir uns an, wie man das einrichtet.

1. Einrichten des Redux-Slice mit createAsyncThunk

Mit createAsyncThunk aus dem Redux Toolkit können wir einen Thunk für den API-Aufruf definieren. Diese Funktion gibt ein Versprechen zurück, sodass die Komponente weiß, wann der Aufruf abgeschlossen ist, und den Loader entsprechend behandeln kann.

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;

Hier ist, was passiert:

• fetchData ist ein asynchroner Thunk, der Daten von einer API abruft.
• Sobald der API-Aufruf abgeschlossen ist, wird fetchData.fulfilled ausgelöst und aktualisiert den Elementstatus in Redux, wenn Sie die Daten global speichern möchten. Für die Darstellung in der Komponente selbst ist dies jedoch nicht notwendig.

2. Erstellen der Komponente mit lokalem Status zum Laden und für Daten

Die Komponente kann den Lade- und Datenstatus lokal verwalten, wodurch die Ladeanzeige gesteuert und die Daten nur innerhalb dieser Komponente angezeigt werden.

MyComponent.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;

Erläuterung

1. Lokaler Status für Loader und Daten:

   • Laden und Daten werden innerhalb der Komponente mithilfe von useState verwaltet und bleiben so vom globalen Redux-Status isoliert.
   • Dadurch kann jede Instanz von MyComponent ihren eigenen Loader und ihre eigenen Daten verwalten, ohne andere Teile der App zu beeinträchtigen.

2. Redux-Aktion wird ausgeführt:

   • Die Funktion handleFetchData sendet fetchData mithilfe von Redux. Diese Aktion gibt ein Versprechen zurück, das es uns ermöglicht, das asynchrone Laden sauber zu handhaben.
   • Wenn die Aktion erfüllt ist, werden die abgerufenen Daten (resultAction.payload) lokal auf data gesetzt.

3. Anzeige des Loaders und der Daten:

   • Während des Ladens wird ein Aktivitätsindikator angezeigt, der dem Benutzer Feedback gibt.
   • Sobald die Daten abgerufen wurden, werden sie lokal in der Komponente angezeigt.

Warum dieser Ansatz?

Dieser Ansatz bringt die Leistungsfähigkeit von Redux mit der lokalen Komponentenverwaltung in Einklang und macht es dadurch hochgradig modular und flexibel:

• Zentralisiertes API-Management: Durch die Platzierung der API-Logik in Redux können Sie diese Aktion über mehrere Komponenten hinweg wiederverwenden und gleichzeitig eine einzige Quelle der Wahrheit für API-Aufrufe sicherstellen.
• Eigenständige Komponentenlogik: Komponenten steuern ihre Lader und Datenanzeige unabhängig voneinander. Diese lokale Handhabung reduziert die Komplexität der Verwaltung temporärer Zustände wie Lader in Redux, die nicht global bestehen müssen.
• Verbesserte Wiederverwendbarkeit: Komponenten können API-Aufrufe unabhängig verwalten, ohne dass umfangreiche Requisiten zum Laden oder für Daten erforderlich sind, wodurch sie einfacher in verschiedenen Kontexten wiederverwendet werden können.

Abschluss

Diese Technik bietet eine saubere, modulare Möglichkeit, API-Aufrufe mit Redux zu verwalten und gleichzeitig die Benutzeroberfläche in jeder Komponente reaktionsfähig und isoliert zu halten. Durch die Nutzung versprechensbasierter Aktionen und lokaler Zustände erhalten Sie die Kontrolle über temporäre UI-Zustände und behalten dennoch die Zentralisierung Ihrer API-Logik bei, wodurch Ihre Codebasis wartbarer und skalierbarer wird.

Versuchen Sie, diesen Ansatz in Ihren Projekten zu implementieren, in denen Sie eine zentralisierte API-Verarbeitung und eine unabhängige UI-Steuerung benötigen – es ist eine großartige Möglichkeit, das Beste aus Redux und Reacts lokalem Statusmanagement zu kombinieren!

Das obige ist der detaillierte Inhalt vonUmgang mit komponentenspezifischem Laden und Datenstatus mit Redux für API-Aufrufe in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!