React Native组件层如何检测Action派发的结果或Payload？

我明白你现在的需求啦——你已经写好了异步的Redux Action来请求轮渡行程数据，现在想在组件里知道这个Action什么时候完成，并且拿到返回的结果对吧？下面我分几种常见的场景给你讲具体的实现方式：

一、先完善Reducer的状态管理（重要） #

首先建议你在Reducer里补充加载状态和错误状态，这样组件能更清晰地判断请求的阶段，而不是只靠数据是否存在。比如：

// 定义初始状态
const initialState = {
  availableTrips: [],
  isLoading: false,
  fetchError: null
};

// 对应的Reducer
const tripReducer = (state = initialState, action) => {
  switch(action.type) {
    // 新增：请求开始时的Action类型
    case 'AVAILABLE_TRIPS_FETCH_START':
      return { ...state, isLoading: true, fetchError: null };
    // 你原来的成功Action
    case 'AVAILABLE_TRIPS_FETCH_SUCCESS':
      return { ...state, isLoading: false, availableTrips: action.payload };
    // 新增：请求失败时的Action类型
    case 'AVAILABLE_TRIPS_FETCH_FAILURE':
      return { ...state, isLoading: false, fetchError: action.payload };
    default:
      return state;
  }
};

然后修改你的Action Creator，在请求前后派发对应的状态Action：

export const searchForTrips = (searchParams) => { 
  let url = 'http://..............com/ferry/public/api/trip/search'; 
  url = bindParamsToUrl(url, searchParams); 
  return (dispatch) => { 
    // 请求开始，派发加载中状态
    dispatch({ type: 'AVAILABLE_TRIPS_FETCH_START' });
    return axios.get(url) 
      .then((response) => { 
        dispatch({ type: 'AVAILABLE_TRIPS_FETCH_SUCCESS', payload: response.data });
        return response.data; // 返回数据，方便组件直接获取
      })
      .catch(error => {
        // 请求失败，派发错误状态
        dispatch({ type: 'AVAILABLE_TRIPS_FETCH_FAILURE', payload: error.message });
        throw error; // 抛出错误，让组件能捕获处理
      }); 
  }; 
};

二、类组件中的实现方式 #

1. 映射Redux状态到组件Props #

用connect把Reducer中的状态映射到组件的Props：

import { connect } from 'react-redux';
import { searchForTrips } from './your-action-file';

class TripSearchComponent extends React.Component {
  // ...组件逻辑
}

// 映射Redux状态到Props
const mapStateToProps = (state) => ({
  availableTrips: state.trip.availableTrips, // 这里的state.trip对应你的Reducer在store中的key
  isLoading: state.trip.isLoading,
  fetchError: state.trip.fetchError
});

// 映射Action Creator到Props
const mapDispatchToProps = {
  searchForTrips
};

export default connect(mapStateToProps, mapDispatchToProps)(TripSearchComponent);

2. 检测Action完成并处理结果 #

可以用componentDidUpdate生命周期钩子，对比前后Props的变化来判断请求是否完成：

componentDidUpdate(prevProps) {
  // 当加载状态从true变为false时，说明请求完成
  if (prevProps.isLoading && !this.props.isLoading) {
    if (this.props.fetchError) {
      // 处理请求失败的情况
      console.error('获取行程失败:', this.props.fetchError);
    } else {
      // 请求成功，拿到结果
      console.log('获取到的行程数据:', this.props.availableTrips);
      // 这里可以做你需要的业务逻辑，比如渲染列表、弹窗提示等
    }
  }
}

// 触发请求的方法，比如在搜索按钮点击时调用
handleSearch = () => {
  const searchParams = { /* 你的搜索参数 */ };
  this.props.searchForTrips(searchParams);
};

三、函数组件中的实现方式 #

如果是用React Hooks的函数组件，实现会更简洁：

1. 用useSelector获取Redux状态 #

import { useSelector, useDispatch } from 'react-redux';
import { searchForTrips } from './your-action-file';

function TripSearchComponent() {
  const dispatch = useDispatch();
  // 从Redux中获取状态
  const { availableTrips, isLoading, fetchError } = useSelector(state => state.trip);

  // ...组件逻辑
}

2. 用useEffect监听状态变化 #

useEffect(() => {
  // 当加载状态结束时
  if (!isLoading) {
    if (fetchError) {
      console.error('获取行程失败:', fetchError);
    } else if (availableTrips.length > 0) {
      console.log('获取到的行程数据:', availableTrips);
      // 处理成功后的业务逻辑
    }
  }
}, [isLoading, fetchError, availableTrips]); // 监听这些状态的变化

// 触发请求的函数
const handleSearch = () => {
  const searchParams = { /* 你的搜索参数 */ };
  dispatch(searchForTrips(searchParams));
};

四、直接通过Action的Promise回调获取结果 #

因为我们修改后的searchForTrips返回了一个Promise，所以你也可以在调用它的时候直接用.then()和.catch()来处理结果：

// 类组件中
handleSearch = () => {
  const searchParams = { /* 你的搜索参数 */ };
  this.props.searchForTrips(searchParams)
    .then(data => {
      console.log('请求成功，数据:', data);
      // 直接拿到返回的数据
    })
    .catch(error => {
      console.error('请求失败:', error);
    });
};

// 函数组件中
const handleSearch = () => {
  const searchParams = { /* 你的搜索参数 */ };
  dispatch(searchForTrips(searchParams))
    .then(data => {
      console.log('请求成功，数据:', data);
    })
    .catch(error => {
      console.error('请求失败:', error);
    });
};

这种方式适合你需要在请求完成后立即执行某个特定逻辑的场景，不需要依赖Redux状态的变化。

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