actions.js

export const loginUser = () => ({
  type: LOGIN_USER,
});

auth.js

import { LOGIN_SUCCESS, LOGIN_FAIL } from '../actions/type';

const INITIAL_STATE = {
  success: false,
};
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, success: action.payload };
    case LOGIN_FAIL:
      return { ...state, success: action.payload };
    default:
      return state;
  }
};

Login.js

import React, { Component, PropTypes } from 'react';
import { View, Image, TextInput, Text, Dimensions, Alert } from 'react-native';
import { Font } from 'expo';
import { connect } from 'react-redux';
import { LoginButton } from '../SubComponents/LoginComponent/LoginButton';
import { loginUser } from '../../actions'

class Login extends Component {
  static propTypes = {
    loginUser: PropTypes.func,
    navigate: PropTypes.func,
  };

  constructor(props) {
    super(props);

    this.state = {
      fontLoaded: false,
      email: '',
      password: '',
      showIndicator: false,
    };
  }

  // this is where we dispatch the action for saga to listen.
  login() {
    this.props.loginUser(); // ==> this is the action
  
    if (this.props.status === true) { 
      // when the user click the button for the first time, the action is dispatched and returned a new state, but i don
      this.setState({ showIndicator: false });
      this.props.navigate('Dashboard');
    } else {
      Alert.alert('Enter your username and password correctly', '', [
        { text: 'Retry', onPress: () => {} },
      ]);
    }
  }

  render() {
    return (
   

        <LoginButton font={this.passFont()} onPress={() => this.login()} />
    );
  }
}


const mapStateToProps = state => ({
  status: state.auth.success,
});

export default connect(mapStateToProps, { loginUser })(Login);

Sagas.js

import axios from 'axios';
import { takeEvery, put } from 'redux-saga/effects';
import { LOGIN_SUCCESS, LOGIN_FAIL, LOGIN_USER } from '../actions/type';

const loginUrl = 'http://dev.bamms.co/api/v1/auth/token';

// remember redux saga won't work with fat arrow function
function* signInUser() {
  try {
    const response = yield axios({
      method: 'post',
      url: loginUrl,
      data: {
        username: '*********',
        password: '*******',
      },
    });

    const StatusOK = response.data.success;

    if (StatusOK) {
      yield put({
        type: LOGIN_SUCCESS,
        payload: StatusOK,
      });
    } else {
      yield put({
        type: LOGIN_FAIL,
        payload: !StatusOK,
      });
    }
  } catch (e) {
    console.log(e);
  }
}

function* rootSaga() {
  yield takeEvery(LOGIN_USER, signInUser);
}

export default rootSaga;

store.js

import { createStore, applyMiddleware } from 'redux';
// import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import logger from 'redux-logger';
import rootSaga from '../config/Sagas';

import reducers from '../reducers';

const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
if (process.env.NODE_ENV === 'development') {
  middleware.push(logger);
}
// middleware.push(sagaMiddleware);
const store = createStore(reducers, {}, applyMiddleware(...middleware));

sagaMiddleware.run(rootSaga);

export default store;