title: Waiting for state to change in react with redux
body: <p>i am using redux in react-native to fetch data from an api, here is whhat i have done so far</p>
  
  <p>api_type.js</p>
  
  <pre><code>export const USER_LOGIN = 'user_login_action';
  export const USER_LOGINING = 'logining_users';
  export const USER_LOGEDIN = 'user_logged_in'; 
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import axios from 'axios';
  import { USER_LOGIN, USER_WALLETS,USER_LOGINING } from './api_types';
  
  const AUTH_API_URL = 'http:/api/v1';
  const CORE_API_URL = 'http:/api/v1';
  let username="";
  let password="";
  let auth_token ="";
  let AuthStr = "";
  
  export function UserWallets(){
  
  return function(dispatch){
      AuthStr ="Bearer "+auth_token;
      console.log ("new auth : "+AuthStr);
      axios.defaults.headers.common['Authorization'] = AuthStr
      axios.get(`${CORE_API_URL}/wallet/allwallets`)
      .then(response =&gt; {
          dispatch({
              type: USER_WALLETS,
              payload: response['data'] 
          });
      }).catch((error) =&gt; {
          console.log(error);
      })
    }
  }
  export function UserLogin() {
   return function(dispatch) {
      dispatch({
          type:USER_LOGINING
      });
  
      axios.post(
           `${AUTH_API_URL}/authenticate/users`,
            {
              email: username,
              password: password
            }
  
      ) 
     .then(response =&gt; {
        dispatch({
         type: USER_LOGIN,
         payload: response['data'] 
        });
        auth_token=response['data']['token'];
  
      } 
  
    )
    .catch((error) =&gt; {
      console.log(error);
     })
   }
  }
  
  export function username(term) {
    username=term; 
    console.log("username " +username);
    return{
     type:"username",
     username
    };
  }
  export function password(term) {
    password=term; 
    console.log("password " +password);
    return{
     type:"password",
     password
   };
  }
  export function authToken (term){
    auth_token = term;
    return{
      type:"authtoken",
      auth_token
    }
  }
  </code></pre>
  
  <p>auth_reducer.js</p>
  
  <pre><code>import { USER_LOGIN ,USER_LOGINING } from '../actions/api_types';
  
    const INTIAL_STATE = { 
      message: '',
      token:'',
      logging: false,
      loggedin: false,
      loginerr: null,
    };
  
  export default function (state = INTIAL_STATE, action) {
    console.log("present state"+action.type); 
    switch(action.type) {
     case USER_LOGIN:{
      return { ...state, message: action.payload.message,   token:action.payload.token,loggedin:true};
     }
     case USER_LOGINING:{
       return {...state,logging:true }
     }
     default:{
       console.log("default "+action.type); 
     }
    }
    return state;
  }
  </code></pre>
  
  <p>index.js // combine reducer</p>
  
  <pre><code>import { combineReducers } from 'redux';
  
  import drawer from './drawer';
  import AuthReducer from './auth_reducer';
  import CoreReducer from './core_reducer';
  
  
  export default combineReducers({
   auth: AuthReducer, 
  
  });
  </code></pre>
  
  <p>i have created and configured the store and wrapped my app with the provider from react-redux, and i have passed the store to the provider, in a nutshell i can now access the store from my componets. 
  below is a function in my login_component, that triggers once i click on login </p>
  
  <pre><code>login(){
    if(this.state.email==""){
      alert("Email require"); 
      return;
    }else if(this.state.password==""){
      alert("password require"); 
      return;
    }else{
      //set the paramter for the reducer to use
      this.props.username(this.state.email);
      this.props.password(this.state.password);
      //activate the user login action
  
      this.props.UserLogin(); 
  
      if(!this.props.auth.loggedin){
       console.log("logging in");
       //show loadging gif
      }
      //checking from response from the auth api
      if(this.props.auth.message=="user successfully logged in"){
          alert(this.props.auth.token);
          Actions.home();
        }else{
          alert("invalid Username/Password"); 
        }      
      }
  }
  </code></pre>
  
  <p>Now this is problem, once i click on login, the block of code i commented (check response from api) will not wait for the store value to change before it perform it action, please i need a way around this.</p>