title: Returning a dispatch with promises in action creators of react redux
body: <p>I have an <strong>actionCreators</strong> in my <code>/actions/authenticate.js</code>to seperate the logic of the <strong>actions</strong> dispatched by <strong>redux</strong> and the <strong>component</strong> of <strong>react</strong>.</p>
  
  <p>Here is my <code>authenticate.js</code> which is my <strong>actionCreators</strong></p>
  
  <pre><code>export function login(email, password) { // Fake authentication function
      return async dispatch =&gt; {
          dispatch(loginRequest()); // dispatch a login request to update the state
          try {
              if (email.trim() === "test123@nomail.com" &amp;&amp; password === "123456") { //If the email and password matches
                  const session = { token: "abc1234", email: email, username: "test123" } // Create a fake token for authentication
                  await AsyncStorage.setItem(DATA_SESSION, JSON.stringify(session)) // Stringinfy the session data and store it
                  setTimeout(() =&gt; { // Add a delay for faking a asynchronous request
                      dispatch(loginSuccess(session)) // Dispatch a successful sign in after 1.5 seconds
                      return Promise.resolve()
                  }, 1500)
              } else { // Otherwise display an error to the user
                  setTimeout(() =&gt; { // Dispatch an error state
                      dispatch(loginFailed("Incorrect email or password"))
                  }, 1500)
              }
          } catch (err) { // When something goes wrong
              console.log(err)
              dispatch(loginFailed("Something went wrong"));
              return Promise.reject()
          }
      };
  } // login
  </code></pre>
  
  <p>Then I import that in my <code>someComponent.js</code> to import that <strong>actionCreator</strong> and bind it using <a href="https://redux.js.org/api/bindactioncreators" rel="nofollow noreferrer">bindActionCreators</a>.</p>
  
  <p>Something like this below:</p>
  
  <pre><code>import { bindActionCreators } from "redux";
  import * as authActions from "../actions/authenticate";
  import { connect } from "react-redux";
  </code></pre>
  
  <p>Then I connect that action to my <strong>component</strong> which is the <code>Login.js</code></p>
  
  <pre><code>export default connect(
      state =&gt; ({ state: state.authenticate }),
      dispatch =&gt; ({
          actions: bindActionCreators(authActions, dispatch)
      })
  )(Login);
  </code></pre>
  
  <p>So I can invoke the function in that actionCreator directly in the <code>Login.js</code></p>
  
  <p>Something like this below:</p>
  
  <pre><code>onPress={() =&gt; {                                 
     this.props.actions.login(this.state.email, this.state.password)
  }}
  </code></pre>
  
  <p>But what I want to happen is this function will <strong>dispatch</strong> an <strong>redux action</strong> and also return a <strong>Promise</strong> if that is possible?</p>
  
  <p>Something like this:</p>
  
  <pre><code>onPress={() =&gt; {                                 
         this.props.actions.login(this.state.email, this.state.password)
         .then(() =&gt; this.props.navigation.navigate('AuthScreen'))
      }}
  </code></pre>
  
  <p>What I want to happen is when I try to sign in. Dispatch those asynchronous redux thunk actions and as well return a promise. If is been resolved or not so I can redirect or navigate to the correct screen.</p>
  
  <p>Appreciate if someone could help.
  Thanks in advance.</p>