React-Redux中Action未触发Reducer问题求助（附代码）

我一眼就看出问题所在啦——你在组件里直接调用了原始的getRooms()函数，但没有使用connect注入到组件props中的那个被包装过的版本！

为什么会出现这个问题？ #

你的getRooms是一个返回thunk函数的action creator（就是里面那个return dispatch => {...}的部分）。redux-thunk中间件的作用是让Redux能够处理这种返回函数的action，但前提是你要通过Redux的dispatch来触发它。

而你通过connect(null, { getRooms })把getRooms映射到组件props时，react-redux已经自动把这个action creator包装成了一个会自动调用dispatch的函数。但你现在直接调用getRooms()，只是拿到了那个thunk函数本身，并没有执行它，所以只会打印reach action，后面的异步请求和dispatch逻辑根本没机会运行。

修正后的代码 #

只需要把handleRooms里的调用改成使用props中的版本就行：

class ConnectionsList extends Component {
  handleRooms = () => {
    // 调用props里被包装过的getRooms，而非直接调用导入的原始函数
    this.props.getRooms()
  }
  // ... 其他代码保持不变
}

这样修改后，当你点击图标时，就会触发被redux-thunk包装过的action creator，它会自动执行内部的dispatch逻辑，发起请求并把结果dispatch到reducer里。

另外可以再确认下：你的store确实已经正确配置了redux-thunk中间件（你提到其他action运行正常，这一步应该没问题），所以修改完调用方式后，应该就能正常工作了。

内容的提问来源于stack exchange，提问作者M.Amer