Как определить тип mapDispatchToProps избыточной функции thunk - PullRequest
Новая
       7

Как определить тип mapDispatchToProps избыточной функции thunk

0 голосов
/ 01 апреля 2019

Следуйте официальному документу , я создаю машинописный текст наподобие функции 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
    })
  )
}

Я хочу добавить эту функцию thunk в свой компонент приложения, используя функцию response-redux connect hoc. 

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).

1 Ответ

0 голосов
/ 01 апреля 2019

Вы имели в виду подключение AppComponent или компонента Login, поскольку вы пытаетесь вызвать this.props.thunkLogin из AppComponent, но вы подключаете Login.попробуйте изменить это так. 

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