使用 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，向用户提供反馈。
- 获取数据后，它会在组件本地显示。