使用 Redux 處理 React Native 中 API 呼叫的特定於元件的載入和資料狀態

建立React Native 應用程式時，管理載入狀態和資料可能會變得複雜，特別是如果您想將API 邏輯集中在Redux 中，但又要保持對臨時狀態的組件級控制，例如裝載機。在這裡，我們將探索一種利用 Redux 進行 API 呼叫的方法，同時保持元件內的載入和資料狀態隔離，使 UI 獨立且可重複使用。

這種方法在以下情況下特別有用：

• API 邏輯應該集中以確保一致性和可維護性。
• 此元件不需要對 UI 狀態進行全域狀態管理，例如載入和取得資料顯示。

讓我們深入了解如何設定。

---

1. 使用 createAsyncThunk 設定 Redux Slice

使用 Redux Toolkit 中的 createAsyncThunk，我們可以定義一個 thunk 來進行 API 呼叫。該函數傳回一個承諾，允許元件知道呼叫何時完成並相應地處理載入器。

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;

這是發生的事情：

• fetchData 是一個從 API 取得資料的非同步 thunk。
• API 呼叫完成後，如果您想要全域儲存數據，將觸發 fetchData.fulfilled，更新 Redux 中的專案狀態。然而，這對於組件本身的顯示目的並不是必需的。

---

2. 建立具有本地狀態的元件用於載入和數據

該元件可以在本地處理載入和資料狀態，提供對載入指示器的控制並僅在該元件內顯示資料。

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;

解釋

1. 載入器和資料的本機狀態：

   • 使用 useState 在元件內管理載入和數據，使它們與全域 Redux 狀態隔離。
   • 這使得 MyComponent 的每個實例都能夠管理自己的載入器和數據，而不會影響應用程式的其他部分。

2. 調度 Redux Action:

   • handleFetchData 函式使用 Redux 排程 fetchData。此操作傳回一個承諾，使我們能夠以乾淨的方式處理非同步載入。
   • 如果操作完成，則所取得的資料（resultAction.payload）將設定為本機資料。

3. 顯示載入器和資料:

   • 載入時，會顯示 ActivityIndi​​cator，向使用者提供回饋。
   • 取得資料後，它會在元件本地顯示。

---

為什麼要採用這種方法？

這種方法平衡了 Redux 的功能與本地元件管理，使其高度模組化和靈活：

• 集中式 API 管理：透過將 API 邏輯放在 Redux 中，您可以跨多個元件重複使用此操作，同時確保 API 呼叫的單一真實來源。
• 自包含元件邏輯：元件獨立控制其載入器和資料顯示。這種本地處理降低了管理臨時狀態（例如 Redux 中的載入器）的複雜性，這些狀態不需要全域持久化。
• 提高了可重用性：元件可以獨立管理 API 調用，而不需要大量的載入或資料屬性，使它們更容易在不同的上下文中重複使用。

---

結論

該技術提供了一種乾淨、模組化的方式來使用 Redux 管理 API 調用，同時保持每個元件中 UI 的回應能力和隔離性。透過利用基於承諾的操作和本機狀態，您可以控制臨時 UI 狀態，並且仍然保持 API 邏輯集中，從而使您的程式碼庫更具可維護性和可擴展性。

嘗試在需要集中式 API 處理和獨立 UI 控制的專案中實現此方法 - 這是結合 Redux 和 React 本機狀態管理最佳功能的好方法！

以上是使用 Redux 處理 React Native 中 API 呼叫的特定於元件的載入和資料狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！