React项目中Redux的fetchPosts函数点击按钮未调用问题

核心问题 #

你在App组件里犯了两个关键错误：

• 没有接收connect注入的已绑定dispatch的fetchPosts函数作为props
• 传递给Button的是原始的action creator（仅返回action对象，不会自动触发dispatch），而非经过Redux包装后的可执行函数

Redux的connect方法在第二个参数传入{ fetchPosts }时，会自动通过bindActionCreators把这个action creator和dispatch绑定，生成一个可以直接调用的函数并注入到组件props中。但你在App组件的参数里只解构了posts，完全没用到这个注入的fetchPosts，反而直接使用了从./actions/index.js导入的原始函数——这个原始函数只是返回一个action对象，不会自动把action派发给store，自然不会触发API请求。

修复步骤 #

1. 在App组件中接收注入的fetchPosts
   修改App组件的参数，解构出props里的fetchPosts：

   const App = ({ posts, fetchPosts }) => {
     // ... 剩余代码不变
   }
   

2. 使用props中的fetchPosts传递给Button
   此时configureButton里的emitEvent使用的就是已经绑定dispatch的函数了：

   const configureButton = {
     buttonText: "Get Posts",
     emitEvent: fetchPosts,
   };
   

这样点击按钮时，调用的就是经过Redux包装的函数，会自动dispatch action，触发你的API请求逻辑。

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