使用 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中文网其他相关文章！