React组件componentDidMount中authenticate函数未执行求助

嘿，我立刻就发现问题出在你的mapDispatchToProps写法上了！

核心问题 #

你当前的mapDispatchToProps只是直接返回了原始的action creator函数，但这些是Thunk异步action，必须被Redux的dispatch函数包裹后，才能真正触发里面的异步逻辑。现在你调用this.props.authenticate()时，只是拿到了那个返回dispatch的函数，并没有实际执行它内部的代码。

看你打印的authenticate函数内容，能确认它是未被dispatch包裹的原始Thunk函数——这就是为什么函数“存在”但没执行的核心原因。

修复方案 #

有两种简单的修复方式，选任意一种都可以：

方式1：手动用dispatch包裹action creators

修改mapDispatchToProps为函数形式，将每个action creator用dispatch包裹：

const mapDispatchToProps = (dispatch) => ({
  authenticate: () => dispatch(authenticate()),
  unauthenticate: () => dispatch(unauthenticate())
});

方式2：直接传递action creators对象给connect（更简洁）

Redux的connect函数支持直接传入一个action creators对象，它会自动帮你用dispatch包裹所有函数。你可以完全去掉自定义的mapDispatchToProps，直接写成：

export default connect(mapStateToProps, { authenticate, unauthenticate })(App);

验证方法 #

修复后，再打印this.props.authenticate.toString()，你会看到输出变成被dispatch包装后的函数，此时调用this.props.authenticate()，就能在控制台看到"auth function"和"AUTHing"的日志了。

另外，你的Thunk中间件配置是正确的（已经在store里添加了thunk），所以不用调整store相关代码。

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