title: How to dispatch a thunk action with typescript
body: <p>Follow the <a href="https://redux.js.org/recipes/usage-with-typescript#usage-with-redux-thunk" rel="nofollow noreferrer">official doc</a>, I make a redux thunk function with typescript.</p>
  
  <pre><code>// store/user/thunk.ts
  
  function loginApi(user: UserState) {
    return fetch(
      `${baseUrl}/login?user=${user.userName}&amp;pwd=${user.pwd}`
    )
      .then(res =&gt; res.json())
  }
  
  export const thunkLogin = (
    user: UserState
  ): ThunkAction&lt;void, AppState, null, Action&lt;string&gt;&gt; =&gt; async dispatch =&gt; {
    const asyncResp = await loginApi(user)
    dispatch(
      updateUser({
        loggedIn: asyncResp.isloggedIn,
        userName: user.userName,
        userPwd: user.userPwd
      })
    )
  }
  </code></pre>
  
  <p>As the official document say, I dispatch a action like this and it has no problem here.</p>
  
  <pre><code>// app.tsx
  
  import { updateUser } from '../store/action'
  
  interface Props {
    updateUser: typeof updateUser
  }
  
  interface State {
    userName: string
    userPwd: string
  }
  
  class AppComponent extends React.Component&lt;Props, State&gt; {
    handleSubmit = () =&gt; {
      this.props.updateUser({
        userName: this.state.userName,
        userPwd: this.state.userPwd
      })
    }
  
    render(){
      return(
        &lt;TextInput
          style={style.userTextInput}
          value={this.state.userName}
          onChangeText={(userName) =&gt; this.setState({ userName })}
          placeholder="input userName"
        /&gt;
        &lt;TextInput
          style={style.userTextInput}
          value={this.state.userPwd}
          placeholder="input user password"
          secureTextEntry={true}
          onChangeText={(userPwd) =&gt; this.setState({ userPwd })}
        /&gt;
        &lt;TouchableOpacity
          style={style.loginBotton}
          onPress={this.handleSubmit}
        &gt;
          &lt;Text style={style.loginBottomText}&gt;LOGIN&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      )
    }
  }
  
  export default connect(
    (state: AppState) =&gt; ({
      user: state.user
    }),
    { updateUser }
  )(AppComponent)
  </code></pre>
  
  <p>The updateUser is a simple action like this.</p>
  
  <pre><code>// store/user/action.ts
  
  import { UserState, UPDATE_USER } from './types'
  
  export function updateUser(newUser: UserState) {
    return {
      type: UPDATE_USER,
      payload: newUser
    }
  }
  </code></pre>
  
  <p>But when I replace <code>updateUser</code> with <code>thunkLogin</code>, it report a error message show that it is not assignable for Props.</p>
  
  <pre><code>...
  
  interface Props {
    thunkLogin: typeof thunkLogin
  }
  
  ...
  
  handleSubmit = () =&gt; {
    this.props.thunkLogin({
      userName: this.state.userName,
      userPwd: this.state.userPwd
    })
  }
  
  ...
  
  export default connect(
    (state: AppState) =&gt; ({
      user: state.user
    }),
    { thunkLogin }
  )(AppComponent)
  </code></pre>
  
  <p><strong>UPDATE</strong>
  The error report</p>
  
  <pre><code>Argument of type 'typeof AppComponent' is not assignable to parameter of type 'ComponentType&lt;Matching&lt;{ user: UserState; } &amp; { thunkLogin: (user: UserState) =&gt; void; }, Props&gt;&gt;'.
    Type 'typeof AppComponent' is not assignable to type 'ComponentClass&lt;Matching&lt;{ user: UserState; } &amp; { thunkLogin: (user: UserState) =&gt; void; }, Props&gt;, any&gt;'.
      Types of parameters 'props' and 'props' are incompatible.
        Type 'Matching&lt;{ user: UserState; } &amp; { thunkLogin: (user: UserState) =&gt; void; }, Props&gt;' is not assignable to type 'Props'.
          Types of property 'thunkLogin' are incompatible.
            Type '(user: UserState) =&gt; void' is not assignable to type '(user: UserState) =&gt; ThunkAction&lt;void, { user: UserState; login: LoginState; }, null, Action&lt;string&gt;&gt;'.
              Type 'void' is not assignable to type 'ThunkAction&lt;void, { user: UserState; login: LoginState; }, null, Action&lt;string&gt;&gt;'. [2345]
  
  </code></pre>