React Native의 API 호출에 대해 Redux를 사용하여 구성 요소별 로딩 및 데이터 상태 처리

React Native 애플리케이션을 구축할 때 로딩 상태와 데이터 관리가 복잡해질 수 있습니다. 특히 Redux에서 API 로직을 중앙 집중화하지만 다음과 같은 임시 상태에 대한 구성 요소 수준 제어를 유지하려는 경우에는 더욱 그렇습니다. 로더. 여기서는 API 호출에 Redux를 활용하는 동시에 로드 및 데이터 상태를 구성 요소 내에서 격리하여 UI를 독립적이고 재사용 가능하게 만드는 접근 방식을 살펴보겠습니다.

이 접근 방식은 다음과 같은 상황에서 특히 유용합니다.

• 일관성과 유지 관리성을 위해 API 로직을 중앙 집중화해야 합니다.
• 구성요소에는 로드 및 가져온 데이터 표시와 같은 UI 상태에 대한 전역 상태 관리가 필요하지 않습니다.

설정 방법을 자세히 살펴보겠습니다.

---

1. createAsyncThunk를 사용하여 Redux 슬라이스 설정

Redux Toolkit의 createAsyncThunk를 사용하여 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에서 데이터를 가져오는 비동기 썽크입니다.
• 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 작업 디스패치:

   • handleFetchData 함수는 Redux를 사용하여 fetchData를 전달합니다. 이 작업은 약속을 반환하므로 비동기 로딩을 깔끔한 방식으로 처리할 수 있습니다.
   • 작업이 이행되면 가져온 데이터(resultAction.payload)가 로컬에서 data로 설정됩니다.

3. 로더 및 데이터 표시:

   • 로드하는 동안 ActivityIndicator가 표시되어 사용자에게 피드백을 제공합니다.
   • 데이터를 가져온 후에는 구성 요소에 로컬로 표시됩니다.

---

이 접근 방식이 필요한 이유는 무엇입니까?

이 접근 방식은 Redux의 성능과 로컬 구성 요소 관리의 균형을 유지하여 고도로 모듈화되고 유연하게 만듭니다.

• 중앙 집중식 API 관리: Redux에 API 로직을 배치하면 API 호출에 대한 단일 정보 소스를 보장하면서 여러 구성 요소에서 이 작업을 재사용할 수 있습니다.
• 자체 포함 구성 요소 논리: 구성 요소는 로더와 데이터 표시를 독립적으로 제어합니다. 이러한 로컬 처리는 전역적으로 지속될 필요가 없는 Redux의 로더와 같은 임시 상태를 관리하는 복잡성을 줄여줍니다.
• 향상된 재사용성: 구성 요소는 로드나 데이터를 위한 광범위한 소품 없이 API 호출을 독립적으로 관리할 수 있으므로 다양한 컨텍스트에서 더 쉽게 재사용할 수 있습니다.

---

결론

이 기술은 UI의 반응성을 유지하고 각 구성 요소에서 격리된 상태를 유지하면서 Redux를 사용하여 API 호출을 관리하는 깔끔하고 모듈식 방법을 제공합니다. 약속 기반 작업과 로컬 상태를 활용하면 임시 UI 상태를 제어하고 API 논리를 중앙 집중식으로 유지하여 코드베이스를 보다 쉽게 ​​유지 관리하고 확장할 수 있습니다.

중앙 집중식 API 처리와 독립적인 UI 제어가 필요한 프로젝트에서 이 접근 방식을 구현해 보세요. 이는 Redux와 React의 로컬 상태 관리의 장점을 결합하는 좋은 방법입니다!

위 내용은 React Native의 API 호출에 대해 Redux를 사용하여 구성 요소별 로딩 및 데이터 상태 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!