title: Dispatch() calls a function but .then() doesn't work on React-Redux
body: <p>I'm creating my first React-Redux App. I'm using <a href="https://github.com/banderson/generator-redux" rel="nofollow"><code>yo generator-redux</code></a> and following this <a href="https://github.com/rajaraodv/react-redux-blog/" rel="nofollow">repo</a> and official documenation. I have rendered de SignIn Presentational Component and it works fine, show errors if inputs are blanks. The problem is at dispatching. I use Thunk Middleware but the repo doesn't. </p>
  
  <p>I have used <code>console.log()</code> to explore how deeper is working my code and I found that the Component Actions are being called, the AJAX request (with axios) is working fine, but the <code>.then()</code> (I think) is not working but doesn't throw errors.</p>
  
  <p>This is my code:</p>
  
  <h2>Action</h2>
  
  <p><code>actions/UsersActions.js</code></p>
  
  <pre><code>import axios from 'axios';
  
  //sign in user
  export const SIGNIN_USER = 'SIGNIN_USER';
  export const SIGNIN_USER_SUCCESS = 'SIGNIN_USER_SUCCESS';
  export const SIGNIN_USER_FAILURE = 'SIGNIN_USER_FAILURE';
  
  //Get current user(me) from token in localStorage
  export const ME_FROM_TOKEN = 'ME_FROM_TOKEN';
  export const ME_FROM_TOKEN_SUCCESS = 'ME_FROM_TOKEN_SUCCESS';
  export const ME_FROM_TOKEN_FAILURE = 'ME_FROM_TOKEN_FAILURE';
  export const RESET_TOKEN = 'RESET_TOKEN';
  
  //log out user
  export const LOGOUT_USER = 'LOGOUT_USER';
  
  axios.defaults.baseURL = location.href.indexOf('10.1.1.33') &gt; 0 ? 'http://10.1.1.33:8080/api/v1' : 'http://10.1.1.33:8080/api/v1';
  
  export function signInUser(formValues) {
      const request = axios.post('/login', formValues);
      console.log(request); 
      // It works fine and receives the resposen when is invoked from Container
      return {
          type: SIGNIN_USER,
          payload: request
      };
  }
  
  export function signInUserSuccess(user) {
      return {
          type: SIGNIN_USER_SUCCESS,
          payload: user
      }
  }
  
  export function signInUserFailure(error) {
      return {
          type: SIGNIN_USER_FAILURE,
          payload: error
      }
  }
  
  export function meFromToken(tokenFromStorage) {
    //check if the token is still valid, if so, get me from the server
    const request = axios.get('/me/from/token?token=${tokenFromStorage}');
  
    return {
      type: ME_FROM_TOKEN,
      payload: request
    };
  }
  
  export function meFromTokenSuccess(currentUser) {
    return {
      type: ME_FROM_TOKEN_SUCCESS,
      payload: currentUser
    };
  }
  
  export function meFromTokenFailure(error) {
    return {
      type: ME_FROM_TOKEN_FAILURE,
      payload: error
    };
  }
  
  
  export function resetToken() {//used for logout
    return {
      type: RESET_TOKEN
    };
  }
  
  export function logOutUser() {
      return {
          type: LOGOUT_USER
      };
  }
  </code></pre>
  
  <h2>Component</h2>
  
  <p><code>components/SignInForm.js</code></p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import { Link } from 'react-router';
  
  class SignInForm extends Component {
      static contextTypes = {
          router: PropTypes.object
      };
  
      componentWillUnmount() {
          // Invoked immediately before a component is unmounted from the DOM.
          // Perform any necessary cleanup in this method, such as invalidating timers or 
          // cleaning up any DOM elements that were created in componentDidMount.
  
          // Important! If your component is navigating based on some global state(from say componentWillReceiveProps)
          // always reset that global state back to null when you REMOUNT
          this.props.resetMe();
      }
  
      componentWillReceiveProps(nextProps) {
          // Invoked when a component is receiving new props. This method is not called for the initial render.
          if(nextProps.user &amp;&amp; nextProps.user.status === 'authenticated' &amp;&amp; nextProps.user.user &amp;&amp; !nextProps.user.error) {
              this.context.router.push('/');
          }
  
          //error
          //Throw error if it was not already thrown (check this.props.user.error to see if alert was already shown)
          //If u dont check this.props.user.error, u may throw error multiple times due to redux-form's validation errors
          if(nextProps.user &amp;&amp; nextProps.user.status === 'signin' &amp;&amp; !nextProps.user.user &amp;&amp; nextProps.user.error &amp;&amp; !this.props.user.error) {
              alert(nextProps.user.error.message);
          }
      }
  
      render() {
          const { asyncValidating, fields: { email, password }, handleSubmit, submitting, user } = this.props;
  
          return (
              &lt;div&gt;
                  &lt;form onSubmit={handleSubmit(this.props.signInUser.bind(this))}&gt;
                      &lt;div&gt;
                          &lt;label&gt;Email&lt;/label&gt;
                          &lt;input type="text" placeholder="email@4geeks.com.ve"  {...email} /&gt;
                          &lt;div&gt;{email.touched ? email.error : ''}&lt;/div&gt;
                          &lt;div&gt;{ asyncValidating === 'email' ? 'validating...' : ''}&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;label&gt;Password&lt;/label&gt;
                          &lt;input type="password"  {...password} /&gt;
                          &lt;div&gt;{password.touched ? password.error : ''}&lt;/div&gt;
                          &lt;div&gt;{ asyncValidating === 'password' ? 'validating...' : ''}&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;button type="submit" disabled={submitting}&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default SignInForm;
  </code></pre>
  
  <h2>Container</h2>
  
  <p><code>containers/SignInFormContainer.js</code></p>
  
  <pre><code>import { reduxForm } from 'redux-form';
  import SignInForm from '../components/SignInForm';
  import { signInUser, signInUserSuccess, signInUserFailure } from '../actions/UsersActions';
  
  // Client side validation
  function validate(values) {
      var errors = {};
      var hasErrors = false;
      if(!values.email || values.email.trim() == '') {
          errors.email = "Enter a registered email.";
          hasErrors = true;
      }
      if(!values.password || values.password.trim() == '') {
          errors.password = "Enter password.";
          hasErrors = true;
      }
      return hasErrors &amp;&amp; errors;
  }
  
  // For any field errors upon submission (i.e. not instant check)
  const validateAndSignInUser = (values, dispatch) =&gt; {
      return new Promise ((resolve, reject) =&gt; {
          console.log('this is showed');
          dispatch(signInUser(values))
          .then((response) =&gt;  {
              console.log('this console.log is not showed');
              let data = response.payload.data;
              // if any one of these exist, then there is a field error 
              if(response.payload.status != 200) {
                  // let other components know of error by updating the redux` state
                  dispatch(signInUserFailure(response.payload));
                  reject(data); // this is for redux-form itself
              } else {
                  // store JWT Token to browser session storage 
                  // If you use localStorage instead of sessionStorage, then this w/ persisted across tabs and new windows.
                  // sessionStorage = persisted only in current tab
                  sessionStorage.setItem('dhfUserToken', response.payload.data.token);
                  // let other components know that we got user and things are fine by updating the redux` state 
                  dispatch(signInUserSuccess(response.payload)); 
                  resolve(); // this is for redux-form itself
              }
          });
      });
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          signInUser: validateAndSignInUser
      }
  }
  
  function mapStateToProps(state, ownProps) {
      return { 
          user: state.user
      };
  }
  
  // connect: first argument is mapStateToProps, 2nd is mapDispatchToProps
  // reduxForm: 1st is form config, 2nd is mapStateToProps, 3rd is mapDispatchToProps
  export default reduxForm({
      form: 'SignInForm', 
      fields: ['email', 'password'], 
      null,
      null,
      validate 
  
  }, mapStateToProps, mapDispatchToProps)(SignInForm);
  </code></pre>
  
  <h2>Presentational/Page/View</h2>
  
  <p><code>presentational/SignIn.js</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import HeaderContainer from '../containers/HeaderContainer';
  import SignInFormContainer from '../containers/SignInFormContainer';
  
  class SignIn extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;HeaderContainer /&gt;
          &lt;SignInFormContainer /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SignIn;
  </code></pre>
  
  <h2>Reducers</h2>
  
  <p><code>reducres/UserReducer.js</code></p>
  
  <pre><code>import {
      ME_FROM_TOKEN, ME_FROM_TOKEN_SUCCESS, ME_FROM_TOKEN_FAILURE, RESET_TOKEN,
      SIGNIN_USER, SIGNIN_USER_SUCCESS,  SIGNIN_USER_FAILURE,
      LOGOUT_USER
  } from '../actions/UsersActions';
  
  const INITIAL_STATE = {user: null, status:null, error:null, loading: false};
  
  export default function(state = INITIAL_STATE, action) {
    let error;
    switch(action.type) {
      case ME_FROM_TOKEN:// loading currentUser("me") from jwttoken in local/session storage storage,
          return { ...state, user: null, status:'storage', error:null, loading: true}; 
      case ME_FROM_TOKEN_SUCCESS://return user, status = authenticated and make loading = false
          return { ...state, user: action.payload.data.user, status:'authenticated', error:null, loading: false}; //&lt;-- authenticated
      case ME_FROM_TOKEN_FAILURE:// return error and make loading = false
          error = action.payload.data || {message: action.payload.message};//2nd one is network or server down errors   
          return { ...state, user: null, status:'storage', error:error, loading: false};
      case RESET_TOKEN:// remove token from storage make loading = false
          return { ...state, user: null, status:'storage', error:null, loading: false};
  
      case SIGNIN_USER:// sign in user,  set loading = true and status = signin
          return { ...state, user: null, status:'signin', error:null, loading: true}; 
      case SIGNIN_USER_SUCCESS://return authenticated user,  make loading = false and status = authenticated
          return { ...state, user: action.payload.data.user, status:'authenticated', error:null, loading: false}; //&lt;-- authenticated
      case SIGNIN_USER_FAILURE:// return error and make loading = false
          error = action.payload.data || {message: action.payload.message};//2nd one is network or server down errors      
          return { ...state, user: null, status:'signin', error:error, loading: false};
  
      case LOGOUT_USER:
        return {...state, user:null, status:'logout', error:null, loading: false};
  
      default:
          return state;
    }
  }
  </code></pre>
  
  <p><code>reducers/index.js</code></p>
  
  <pre><code>import { combineReducers } from 'redux';
  import { UserReducer } from './UserReducer';
  import { reducer as formReducer } from 'redux-form';
  
  const rootReducer = combineReducers({
      user: UserReducer,
      form: formReducer  // &lt;-- redux-form
  });
  
  export default rootReducer;
  </code></pre>
  
  <h2>Store</h2>
  
  <pre><code>import {createStore, applyMiddleware, combineReducers, compose} from 'redux';
  import thunkMiddleware from 'redux-thunk';
  import {devTools, persistState} from 'redux-devtools';
  import rootReducer from '../reducers/index';
  
  let createStoreWithMiddleware;
  
  // Configure the dev tools when in DEV mode
  if (__DEV__) {
    createStoreWithMiddleware = compose(
      applyMiddleware(thunkMiddleware),
      devTools(),
      persistState(window.location.href.match(/[?&amp;]debug_session=([^&amp;]+)\b/))
    )(createStore);
  } else {
    createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
  }
  
  export default function configureStore(initialState) {
    return createStoreWithMiddleware(rootReducer, initialState);
  }
  </code></pre>
  
  <h2>index.js</h2>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {Provider} from 'react-redux';
  import { Router, browserHistory } from 'react-router';
  import routes from './routes';
  import configureStore from './store/configureStore';
  import {renderDevTools} from './utils/devTools';
  
  const store = configureStore();
  
  ReactDOM.render(
        &lt;div&gt;
          {/* &lt;Home /&gt; is your app entry point */}
          &lt;Provider store={store}&gt;
            &lt;Router history={browserHistory} routes={routes} /&gt;
          &lt;/Provider&gt;
  
          {/* only renders when running in DEV mode */
            renderDevTools(store)
          }
        &lt;/div&gt;
      , document.getElementById('main'));
  </code></pre>
  
  <p>I hope you can help me! I don't know if something is wrong because I'm using Thunk and the example don't, or if something is missging.</p>
  
  <p>Thank you guys!</p>