React Native での API 呼び出しの Redux によるコンポーネント固有の読み込みとデータ状態の処理

React Native アプリケーションを構築する場合、特に API ロジックを Redux に集中させながら、一時的な状態に対するコンポーネントレベルの制御を維持したい場合、読み込み状態とデータの管理が複雑になることがあります。ローダー。ここでは、読み込みとデータの状態をコンポーネント内で分離し、UI を自己完結型で再利用可能にしながら、API 呼び出しに Redux を活用するアプローチを検討します。

このアプローチは、次のような状況で特に有益です。

• 一貫性と保守性を確保するために、API ロジックは一元化される必要があります。
• コンポーネントは、読み込みや取得したデータの表示などの UI 状態のグローバルな状態管理を必要としません。

これを設定する方法を詳しく見てみましょう。

---

1. createAsyncThunk を使用した Redux スライスのセットアップ

Redux Toolkit の createAsyncThunk を使用すると、API 呼び出しを行うためのサンクを定義できます。この関数は Promise を返すため、コンポーネントは呼び出しがいつ完了したかを知り、それに応じてローダーを処理できます。

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 をディスパッチします。このアクションは Promise を返し、非同期ロードをクリーンな方法で処理できるようにします。
   • アクションが実行されると、フェッチされたデータ (resultAction.payload) がローカルで data に設定されます。

3. ローダーとデータの表示:

   • 読み込み中、ActivityIndi​​cator が表示され、ユーザーにフィードバックが提供されます。
   • データが取得されると、コンポーネント内でローカルに表示されます。

---

なぜこのアプローチなのか?

このアプローチは、Redux のパワーとローカルコンポーネント管理のバランスをとり、高度なモジュール化と柔軟性を実現します。

• 一元化された API 管理: API ロジックを Redux に配置することで、API 呼び出しの信頼できる唯一の情報源を確保しながら、このアクションを複数のコンポーネント間で再利用できます。
• 自己完結型コンポーネント ロジック: コンポーネントはローダーとデータ表示を独立して制御します。このローカルな処理により、グローバルに永続化する必要がない Redux のローダーのような一時的な状態の管理の複雑さが軽減されます。
• 再利用性の向上: コンポーネントは、読み込みやデータのための広範な props を必要とせずに API 呼び出しを独立して管理できるため、さまざまなコンテキストでの再利用が容易になります。

---

結論

この手法は、UI の応答性を維持し、各コンポーネントで分離された状態を維持しながら、Redux で API 呼び出しを管理するためのクリーンなモジュール式の方法を提供します。 Promise ベースのアクションとローカル状態を活用することで、一時的な UI 状態を制御しながら API ロジックを一元化して、コードベースの保守性と拡張性を高めることができます。

一元的な API 処理と独立した UI 制御が必要なプロジェクトにこのアプローチを実装してみてください。これは、Redux と React のローカル状態管理の利点を組み合わせる優れた方法です。

以上がReact Native での API 呼び出しの Redux によるコンポーネント固有の読み込みとデータ状態の処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。