Waiting for state to change in react with redux

Viewed 6704

i am using redux in react-native to fetch data from an api, here is whhat i have done so far

api_type.js

export const USER_LOGIN = 'user_login_action';
export const USER_LOGINING = 'logining_users';
export const USER_LOGEDIN = 'user_logged_in'; 

index.js

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 => {
        dispatch({
            type: USER_WALLETS,
            payload: response['data'] 
        });
    }).catch((error) => {
        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 => {
      dispatch({
       type: USER_LOGIN,
       payload: response['data'] 
      });
      auth_token=response['data']['token'];

    } 

  )
  .catch((error) => {
    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
  }
}

auth_reducer.js

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;
}

index.js // combine reducer

import { combineReducers } from 'redux';

import drawer from './drawer';
import AuthReducer from './auth_reducer';
import CoreReducer from './core_reducer';


export default combineReducers({
 auth: AuthReducer, 

});

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

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"); 
      }      
    }
}

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.

2 Answers
Related