Mengendalikan Pemuatan Khusus Komponen dan Keadaan Data dengan Redux untuk Panggilan API dalam React Native

Apabila membina aplikasi React Native, mengurus keadaan pemuatan dan data boleh menjadi rumit, terutamanya jika anda ingin memusatkan logik API dalam Redux tetapi mengekalkan kawalan peringkat komponen ke atas keadaan sementara, seperti pemuat. Di sini, kami akan meneroka pendekatan yang memanfaatkan Redux untuk panggilan API, sambil mengekalkan keadaan pemuatan dan data terpencil dalam komponen, menjadikan UI serba lengkap dan boleh digunakan semula.

Pendekatan ini amat berfaedah dalam situasi di mana:

• Logik API harus dipusatkan untuk ketekalan dan kebolehselenggaraan.
• Komponen tidak memerlukan pengurusan keadaan global untuk keadaan UI seperti memuatkan dan mengambil paparan data.

Mari kita mendalami cara untuk menyediakan ini.

1. Sediakan Redux Slice dengan createAsyncThunk

Menggunakan createAsyncThunk daripada Redux Toolkit, kami boleh mentakrifkan thunk untuk membuat panggilan API. Fungsi ini mengembalikan janji, membolehkan komponen mengetahui apabila panggilan selesai dan mengendalikan pemuat dengan sewajarnya.

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;

Berikut ialah perkara yang berlaku:

• fetchData ialah gaya tak segerak yang mengambil data daripada API.
• Setelah panggilan API selesai, fetchData.fulfilled dicetuskan, mengemas kini keadaan item dalam Redux jika anda ingin menyimpan data secara global. Walau bagaimanapun, ini tidak diperlukan untuk tujuan paparan dalam komponen itu sendiri.

2. Mencipta Komponen dengan Keadaan Setempat untuk Memuatkan dan Data

Komponen boleh mengendalikan keadaan pemuatan dan data secara setempat, memberikan kawalan ke atas penunjuk pemuatan dan memaparkan data hanya dalam komponen ini.

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;

Penjelasan

1. Negeri Tempatan untuk Pemuat dan Data:

   • pemuatan dan data diuruskan dalam komponen menggunakan useState, memastikan ia terpencil daripada keadaan Redux global.
   • Ini membolehkan setiap tika MyComponent mengurus pemuat dan datanya sendiri tanpa menjejaskan bahagian lain apl.

2. Menghantar Tindakan Redux:

   • Fungsi handleFetchData menghantar fetchData menggunakan Redux. Tindakan ini mengembalikan janji, membolehkan kami mengendalikan pemuatan tak segerak dengan cara yang bersih.
   • Jika tindakan itu dipenuhi, data yang diambil (resultAction.payload) ditetapkan secara setempat kepada data.

3. Memaparkan Pemuat dan Data:

   • Semasa memuatkan, ActivityIndicator ditunjukkan, memberikan maklum balas kepada pengguna.
   • Setelah data diambil, ia dipaparkan secara setempat dalam komponen.

Mengapa Pendekatan Ini?

Pendekatan ini mengimbangi kuasa Redux dengan pengurusan komponen tempatan, menjadikannya sangat modular dan fleksibel:

• Pengurusan API Berpusat: Dengan meletakkan logik API dalam Redux, anda boleh menggunakan semula tindakan ini merentas berbilang komponen sambil memastikan satu sumber kebenaran untuk panggilan API.
• Logik Komponen Kendiri: Komponen mengawal pemuat dan paparan datanya secara bebas. Pengendalian setempat ini mengurangkan kerumitan mengurus keadaan sementara seperti pemuat dalam Redux, yang tidak perlu berterusan secara global.
• Kebolehgunaan Semula Dipertingkat: Komponen boleh mengurus panggilan API secara bebas tanpa memerlukan prop yang luas untuk memuatkan atau data, menjadikannya lebih mudah untuk digunakan semula dalam konteks yang berbeza.

Kesimpulan

Teknik ini menyediakan cara modular yang bersih untuk mengurus panggilan API dengan Redux sambil memastikan UI responsif dan terpencil dalam setiap komponen. Dengan memanfaatkan tindakan berasaskan janji dan keadaan setempat, anda memperoleh kawalan ke atas keadaan UI sementara dan masih mengekalkan logik API anda terpusat, menjadikan pangkalan kod anda lebih boleh diselenggara dan berskala.

Cuba laksanakan pendekatan ini dalam projek anda di mana anda memerlukan pengendalian API terpusat dan kawalan UI bebas – ini merupakan cara terbaik untuk menggabungkan pengurusan negeri tempatan Redux dan React yang terbaik!

Atas ialah kandungan terperinci Mengendalikan Pemuatan Khusus Komponen dan Keadaan Data dengan Redux untuk Panggilan API dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!