api.js

// a library to wrap and simplify api calls
import apisauce from 'apisauce'

// our "constructor"
const create = (baseURL = 'url') => {
  // ------
  // STEP 1
  // ------
  //
  // Create and configure an apisauce-based api object.
  //
  const api = apisauce.create({
    // base URL is read from the "constructor"
    baseURL,
    // here are some default headers
    headers: {
      'Cache-Control': 'no-cache'
    },
    // 10 second timeout...
    timeout: 10000
  })

  // ------
  // STEP 2
  // ------
  //
  // Define some functions that call the api.  The goal is to provide
  // a thin wrapper of the api layer providing nicer feeling functions
  // rather than "get", "post" and friends.
  //
  // I generally don't like wrapping the output at this level because
  // sometimes specific actions need to be take on `403` or `401`, etc.
  //
  // Since we can't hide from that, we embrace it by getting out of the
  // way at this level.
  //

  const loginUser = (params) => api.post('api/user/create', params)
  const setHeader = (params) => api.setHeader('Authorization', params)


  // ------
  // STEP 3
  // ------
  //
  // Return back a collection of functions that we would consider our
  // interface.  Most of the time it'll be just the list of all the
  // methods in step 2.
  //
  // Notice we're not returning back the `api` created in step 1?  That's
  // because it is scoped privately.  This is one way to create truly
  // private scoped goodies in JavaScript.
  //
  return {
    // a list of the API functions from step 2
    loginUser,
    setHeader

  }
}

// let's return back our create method as the default.
export default {
  create
}

LoginSaga.js

/* ***********************************************************
* A short word on how to use this automagically generated file.
* We're often asked in the ignite gitter channel how to connect
* to a to a third party api, so we thought we'd demonstrate - but
* you should know you can use sagas for other flow control too.
*
* Other points:
*  - You'll need to add this saga to sagas/index.js
*  - This template uses the api declared in sagas/index.js, so
*    you'll need to define a constant in that file.
*************************************************************/

import { call, put } from 'redux-saga/effects'
import LoginActions from '../Redux/LoginRedux'
import { NavigationActions } from 'react-navigation';
// import { LoginSelectors } from '../Redux/LoginRedux'

export function* loginUser(api, action) {
  const { data } = action
  // get current data from Store
  // const currentData = yield select(LoginSelectors.getData)
  // make the call to the api
  const response = yield call(api.loginUser, data)

  // success?
  if (response.ok) {
    // You might need to change the response here - do this with a 'transform',
    // located in ../Transforms/. Otherwise, just pass the data back from the api.
    yield put(LoginActions.loginSuccess(response.data))
    // TODO: Move to Actions
    yield call([api, 'setHeader'], `Bearer ${response.data.data[1].token}`)
    yield put(NavigationActions.navigate({ routeName: 'LaunchScreen' }));
  } else {
    yield put(LoginActions.loginFailure())
  }
}

StartupSaga.js

import { put, select, call } from 'redux-saga/effects'
import GithubActions, { GithubSelectors } from '../Redux/GithubRedux'
import { LoginSelectors } from '../Redux/LoginRedux';
import { isNil } from 'ramda'
import { NavigationActions } from 'react-navigation';
import API from '../Services/Api'


// exported to make available for tests
export const selectAvatar = GithubSelectors.selectAvatar

export const getToken = LoginSelectors.getData
// process STARTUP actions
export function* startup(api, action) {
  /*
  if (__DEV__ && console.tron) {
    // straight-up string logging
    console.tron.log('Hello, I\'m an example of how to log via Reactotron.')

    // logging an object for better clarity
    console.tron.log({
      message: 'pass objects for better logging',
      someGeneratorFunction: selectAvatar
    })

    // fully customized!
    const subObject = { a: 1, b: [1, 2, 3], c: true }
    subObject.circularDependency = subObject // osnap!
    console.tron.display({
      name: '🔥 IGNITE 🔥',
      preview: 'You should totally expand this',
      value: {
        '💃': 'Welcome to the future!',
        subObject,
        someInlineFunction: () => true,
        someGeneratorFunction: startup,
        someNormalFunction: selectAvatar
      }
    })
  }
  */
  const token = yield select(getToken)
  // only get if we don't have it yet
  console.log("API token", token);

  if (!isNil(token)) {
    yield put(NavigationActions.navigate({ routeName: 'LaunchScreen' }));
    yield call([api, 'setHeader'], `Bearer ${token.data[1].token}`)
  }
  else {
    yield put(NavigationActions.navigate({ routeName: 'LoginScreen' }));
  }

}