React Hook中调用Redux action函数未执行的问题排查

你在组件内调用的bar，是直接从./actions导入的原始Redux Thunk action creator，整个调用流程完全没有接入Redux的dispatch通道，所以函数内部的业务逻辑根本没有机会执行。

你的bar函数的实际结构是两层嵌套的函数：

• 第一层是导出的bar本身，调用它时只会返回第二层的函数，这层函数里没有任何业务逻辑，更没有你写的console.log
• 第二层是接收dispatch作为入参的异步函数，你写的console.log、异步逻辑、dispatch触发动作，全在这层函数体内

当你直接在组件里执行bar()时，仅仅是走完了第一层函数，拿到了第二层函数的引用——但这个函数既没有被你手动调用，也没有被传给Redux的dispatch通道走Thunk中间件的执行逻辑，所以它就是个放在内存里的普通函数对象，函数体内的所有代码（包括没打印的日志）都不会执行。

• connect配置里的mapDispatchToProps已经通过bindActionCreators把bar正确绑定到了组件的props.bar上——绑定后的bar执行时，会自动把第一层函数返回的第二层函数，作为action传给Redux的dispatch方法，再由配置好的Redux Thunk中间件识别这个函数类型的action，自动把dispatch作为参数传入执行，让整个函数链完整跑完。但你在组件定义里从来没有从props中取出这个绑定好的版本，反而用了顶部import进来的原始未绑定的bar，导致connect做的绑定完全没有生效。
• 你观察到的“前后的console.log正常输出、内部日志不打印”的现象，完全符合这个逻辑：因为调用未绑定的bar时没有任何异常抛出，只是返回了一个未被执行的函数引用，所以前后的日志能正常打印，中间的内部逻辑完全没有触发。

• 从组件的props中解构出connect注入的、已经绑定好dispatch通道的bar方法，替换掉顶部import的原始版本：

  // 从props取出绑定好的bar，不要用import的原始版本
  const Foo = ({ bar }) => {
    useEffect(() => {
      console.log('I get logged');
      bar(); // 这里会自动接入dispatch通道，完整执行两层函数，内部的console.log正常输出
      console.log('I get logged too');
    }, [])
  
    return <Whatever> ... </Whatever>
  };
  

• 额外注意：
  • 如果坚持使用import进来的原始bar，必须手动把返回的函数传给dispatch，写法类似dispatch(bar())，但这种写法会让组件代码变得冗余，不推荐。
  • 确认项目已经正确安装并配置了redux-thunk中间件，否则即使完成绑定，Thunk中间件也无法识别函数类型的action，内部逻辑不会被执行。

内容的提问来源于stack exchange，提问作者four-eyes