使用 Redux 處理 React Native 中 API 呼叫的特定於元件的載入和資料狀態-js教程-PHP中文網

Handling Component-Specific Loading and Data State with Redux for API Calls in React Native

建立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;

登入後複製

解釋

載入器和資料的本機狀態：
- 使用 useState 在元件內管理載入和數據，使它們與全域 Redux 狀態隔離。
- 這使得 MyComponent 的每個實例都能夠管理自己的載入器和數據，而不會影響應用程式的其他部分。
調度 Redux Action:
- handleFetchData 函式使用 Redux 排程 fetchData。此操作傳回一個承諾，使我們能夠以乾淨的方式處理非同步載入。
- 如果操作完成，則所取得的資料（resultAction.payload）將設定為本機資料。
顯示載入器和資料:
- 載入時，會顯示 ActivityIndicator，向使用者提供回饋。
- 取得資料後，它會在元件本地顯示。