如何定义redux thunk函数的mapDispatchToProps类型

Question

在official doc之后，我创建了一个thunk函数之类的登录打字稿。

function loginApi(user: UserState) {
  return fetch(
    `${baseUrl}/login?user=${user.userName}&pwd=${user.pwd}`
  )
    .then(res => res.json())
}

export const thunkLogin = (
  user: UserState
): ThunkAction<void, AppState, null, Action<string>> => async dispatch => {
  const asyncResp = await loginApi(user)
  dispatch(
    updateUser({
      loggedIn: asyncResp.isloggedIn,
      userName: user.userName,
      userPwd: user.userPwd
    })
  )
}

我想使用react-redux connect hoc函数将此thunk函数添加到我的应用程序组件中。

import { thunkLogin } from './thunkLoginPath'

interface Props {
  // place 1
  thunkLogin: typeof thunkLogin
}

interface State {
  userName: string
  userPwd: string
}

class AppComponent extends React.Component<Props, State> {
  handleSubmit = () => {
    this.props.thunkLogin({
      userName: this.state.userName,
      userPwd: this.state.userPwd
    })
  }

  render(){
    return(
      <TouchableOpacity
        style={style.loginBotton}
        onPress={this.handleSubmit}
      >
        <Text style={style.loginBottomText}>LOGIN</Text>
      </TouchableOpacity>
    )
  }
}

export default connect(
  (state: AppState) => ({
    user: state.user
  }),
  // place 2
  { thunkLogin }
)(AppComponent)

报告错误，显示thunkLogin在Props处声明无法分配给mapDispatchToProps（位置1->位置2）。

Answer 1

您是要连接AppComponent还是Login组件，因为您尝试 从AppComponent调用this.props.thunkLogin，但是您连接了Login。 尝试像这样更改它。

export default connect(
  (state: AppState) => ({
    user: state.user
  }),
  // place 2
  { thunkLogin }
)(AppComponent)

Answer 2

您的mapDispatchToProps完全可以。如果要在此处使用其他语法，则可以：

const mapDispatchToProps = (dispatch) => {
  return {
    thunkLogin: (user: UserState) => {
      dispatch(thunkLogin(user))
    }
  }
}

但是我认为这不会帮助您解决TypeScript错误。至少我在应对问题上有很多问题。由于TypeScript足够智能，可以识别函数类型，因此我最终放弃了所有ThunkAction废话。我只注意动作创建者的嵌套函数返回any。实际上，它总是返回void（但是TypeScript不喜欢它）。您的函数应如下所示：

export const thunkLogin = (user: UserState) => async (dispatch): any => {
  const asyncResp = await loginApi(user)
  dispatch(
    updateUser({
      loggedIn: asyncResp.isloggedIn,
      userName: user.userName,
      userPwd: user.userPwd
    })
  )
}

此解决方案对我来说已经足够好了，因为它显示了我在组件内键入的内容。我可以知道动作创建者是常规的还是笨拙的。一个例子：

如果您想了解更多有关react-thunk和Typescript的信息，请转到此处： https://github.com/reduxjs/redux-thunk/issues/103