React Native Expo中跨Tab页复用Redux异步数据的方案

以下是几种实用的解决方案，核心思路是避免访问未初始化的数据+确保请求只触发一次：

1. 组件内做防御性检查与条件渲染 #

在MenuScreen中直接判断数据是否存在，不存在时显示加载状态，避免访问undefined属性报错：

import { useSelector } from 'react-redux';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

const MenuScreen = () => {
  // 从Redux Store获取数据
  const dishesByType = useSelector(state => state.dishes.dishesByType);

  return (
    <View>
      {/* 数据未加载完成时显示加载动画 */}
      {!dishesByType ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        // 数据存在时渲染业务组件
        <FlatList
          data={Object.values(dishesByType)}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <Text>{item.name}</Text>}
        />
      )}

      {/* 或者用可选链操作符简化判断（ES2020+支持） */}
      {/* {dishesByType?.hotDishes?.map(dish => (
        <Text key={dish.id}>{dish.name}</Text>
      ))} */}
    </View>
  );
};

2. 在Redux Reducer中初始化默认值 #

修改菜品数据的Reducer，给dishesByType设置初始空对象/数组，避免初始状态为undefined：

// dishesReducer.js
const initialState = {
  dishesByType: {}, // 初始化为空对象，而非undefined
  isLoading: false,
  error: null
};

const dishesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DISHES_SUCCESS':
      return {
        ...state,
        dishesByType: action.payload,
        isLoading: false
      };
    case 'FETCH_DISHES_LOADING':
      return { ...state, isLoading: true };
    case 'FETCH_DISHES_ERROR':
      return { ...state, isLoading: false, error: action.payload };
    default:
      return state;
  }
};

export default dishesReducer;

3. 全局预加载数据（避免Tab切换重复请求） #

把数据请求逻辑移到TabNavigator的父组件（比如App.js），确保所有Tab页面加载前数据已准备完成，同时通过判断数据是否存在避免重复请求：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ActivityIndicator } from 'react-native';
import MainTabNavigator from './navigation/MainTabNavigator';
import { fetchDishes } from './actions/dishesActions';

export default function App() {
  const dispatch = useDispatch();
  const { dishesByType, isLoading } = useSelector(state => state.dishes);

  useEffect(() => {
    // 仅当数据为空时触发请求，避免重复调用
    if (Object.keys(dishesByType).length === 0) {
      dispatch(fetchDishes());
    }
  }, [dispatch, dishesByType]);

  // 全局加载状态，所有Tab页面都等待数据加载完成
  if (isLoading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return <MainTabNavigator />;
}

4. 组件内监听数据变化再处理 #

利用useEffect监听dishesByType的变化，只有当数据存在时才做后续处理：

import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { FlatList, Text } from 'react-native';

const MenuScreen = () => {
  const dishesByType = useSelector(state => state.dishes.dishesByType);
  const [processedMenuData, setProcessedMenuData] = useState([]);

  useEffect(() => {
    // 数据存在且非空时，处理成组件需要的格式
    if (dishesByType && Object.keys(dishesByType).length > 0) {
      const allDishes = Object.values(dishesByType).flat();
      setProcessedMenuData(allDishes);
    }
  }, [dishesByType]);

  return (
    <FlatList
      data={processedMenuData}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
};

内容的提问来源于stack exchange，提问作者JeremyQin