使用React Hooks开发函数组件后Redux动作无法触发，listings始终为空

核心问题定位 #

• Action调用逻辑不符合Redux Thunk运行规则
  代码虽然引入了useDispatch，但从未实际执行它拿到store的dispatch方法。目前在useEffect里直接调用getUserInfo()、getUserListings()，本质上只是执行了action函数的最外层，拿到了内层等待接收dispatch参数的返回函数——既没有把这个返回值传给Redux store，也不会触发函数内部的axios请求流程。这就是为什么你在action里写的console.log('made it')永远不会打印，全程也没有抛出可识别的报错。

  正确的调用流程需要两步：

  1. 在组件顶层（和其他hooks同级位置）拿到dispatch实例

     const dispatch = useDispatch();
     

  2. 在useEffect内通过dispatch把action传递给store

     useEffect(() => {
       setLoading(true);
       dispatch(getUserInfo());
       dispatch(getUserListings());
     }, [dispatch]);
     

• 存在冗余无用导入，易引发后续逻辑冲突
  组件中写了import listings from '../../reducers/listings';，这行导入既没有被实际使用，还和后续通过useSelector拿到的listings状态变量重名，很容易在后续开发中引发变量覆盖的bug，直接删除这行无用导入即可。

• 校验Store的中间件配置
  你的Action是返回函数的Thunk写法，如果创建store时没有通过applyMiddleware挂载redux-thunk中间件，哪怕你正确调用了dispatch，Thunk返回的函数也不会被执行——Redux会直接把这个函数对象当成普通action传入reducer，全程不会抛出报错。
  检查你的store配置文件，确认存在类似配置：

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  
  const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
  );
  

修复后效果 #

按照上述调整完成后，Action内部的接口请求会正常触发，控制台日志可以正常打印，接口返回的listings数据会通过reducer更新到全局状态，组件中渲染的列表内容也能正常展示。

当前代码中hooks的调用顺序是符合React规则的（所有hooks都在条件判断前声明），不需要调整。

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