React Redux-thunk中Promise始终处于pending状态的问题求助

嘿，我刚接触React Redux和Thunk的时候也踩过类似的坑，咱们一步步来捋清楚问题出在哪～

首先，最可能的核心问题：在render()里调用dispatch #

render()方法会在组件的props/state变化、父组件重渲染等多种场景下频繁触发。如果你每次render都分发这个thunk action，就会导致反复发起异步请求——前一个请求还没完成，新的请求又进来了，看起来就像是action一直处于pending状态，控制台也会持续输出状态信息。

解决方案：把dispatch逻辑移到合适的时机

• 如果你用的是类组件：把分发操作放到componentDidMount钩子（组件挂载时只执行一次），或者componentDidUpdate（仅当特定props/state变化时执行）里。
• 如果你用的是函数组件：用useEffect钩子，指定依赖项确保只在需要的时候执行。

其次，检查你的Thunk Action Creator逻辑 #

要确保你的thunk函数正确处理了异步流程，并且在请求完成（成功/失败）后分发对应的结束action。举个正确的示例：

// 正确的thunk action creator
export const fetchData = () => {
  return async (dispatch) => {
    // 先分发pending状态的action
    dispatch({ type: 'FETCH_DATA_PENDING' });
    try {
      // 执行异步操作（比如API请求）
      const response = await fetch('你的API地址');
      const data = await response.json();
      // 请求成功，分发成功action
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      // 请求失败，分发失败action
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
    }
  };
};

如果你的thunk里漏掉了await、或者没有在异步操作结束后分发成功/失败的action，reducer就永远收不到结束信号，状态会一直停在pending。

然后，检查Reducer的状态更新逻辑 #

确认你的reducer正确处理了pending、success、failure三种状态的action，及时更新loading状态：

const initialState = {
  data: null,
  loading: false,
  error: null
};

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_DATA_PENDING':
      return { ...state, loading: true, error: null };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

如果reducer没有处理success/failure的action，loading会一直是true，看起来就像action一直pending。

最后，给你一个完整的正确用法示例（函数组件） #

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

function MyComponent() {
  const dispatch = useDispatch();
  const { loading, data, error } = useSelector(state => state.data);

  // 组件挂载时只发起一次请求
  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]); // 依赖dispatch，避免不必要的重渲染

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;

  return <div>获取到的数据：{JSON.stringify(data)}</div>;
}

export default MyComponent;

总结一下：先把dispatch从render()里移到合适的钩子中，避免重复发起请求；再检查thunk和reducer的逻辑，确保异步流程的开始和结束都有对应的action处理。

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