React Redux中映射dispatch Props并连接组件失效问题

看起来你的问题出在两个关键地方：Thunk 类型定义不匹配和mapDispatchToProps 没有正确绑定 dispatch，导致 thunk 函数没有被 redux-thunk 中间件处理，所以函数体代码没执行。

1. 修正 AppThunkAction 接口的返回类型 #

你的 createActivity 是一个 async 函数，它的返回值默认是 Promise<void>，但你定义的 AppThunkAction 接口要求返回 void，这会导致类型不匹配，甚至可能让 redux-thunk 无法正确识别这个 thunk。

修改 AppThunkAction 接口，让它支持返回 Promise：

export interface AppThunkAction<TAction> {
  (dispatch: (action: TAction) => void, getState: () => RootState): Promise<void>;
}

2. 正确绑定 dispatch 到 Thunk Action Creator #

你当前的 mapDispatchToProps 直接返回了原始的 action creator，没有用 dispatch 包裹它。redux-thunk 的工作原理是：只有当你dispatch 一个 thunk 函数时，中间件才会执行它内部的逻辑。直接调用原始的 action creator 只会返回 thunk 函数，不会触发执行。

这里有两种简单的修正方式：

方式一：使用对象形式的 mapDispatchToProps（推荐） #

connect 函数支持直接传入一个包含 action creators 的对象，它会自动将每个 action creator 绑定到 dispatch：

// 替换原来的 mapDispatchToProps 和 connect 代码
export default connect(null, {
  createActivity: Firebase.actionCreators.createActivity
})(PeriodEditCell);

方式二：手动在函数形式的 mapDispatchToProps 中 dispatch thunk #

如果你坚持使用函数形式的 mapDispatchToProps，需要手动用 dispatch 调用 thunk，同时要使用 redux-thunk 提供的 ThunkDispatch 类型来正确标注 dispatch：

import { ThunkDispatch } from 'redux-thunk';

const mapDispatchToProps = (dispatch: ThunkDispatch<RootState, unknown, any>): globalProbs => {
  return {
    createActivity: (period: Models.Period) => {
      // 手动 dispatch thunk 函数
      dispatch(Firebase.actionCreators.createActivity(period));
    }
  };
};

export default connect(null, mapDispatchToProps)(PeriodEditCell);

为什么之前的代码不工作？ #

• 你的 AppThunkAction 类型定义和实际的 async thunk 返回值不匹配，可能导致 TypeScript 类型检查警告，甚至运行时 redux-thunk 无法识别这个 thunk。
• 你没有将 thunk action creator 绑定到 dispatch，调用 this.props.createActivity(blah) 只是执行了 action creator，返回了一个 thunk 函数，但没有把这个 thunk 交给 redux 处理，所以内部的异步逻辑永远不会执行。

按照上面的步骤修改后，调用 this.props.createActivity(blah) 时，redux-thunk 会自动执行 thunk 函数体里的代码。

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