title: Fetching data from API in react native using redux
body: <p>I am working on a react-native project where I am trying to fetch data from an api using axios library and display the data.So,my app first shows a splash screen and it then needs to navigate to a page which consists of tabs.The tabs will contain the data from the api.</p>
  
  <p>So,I am trying to initialize my store in my Homepage which comes after the splash screen.I have my reducer and action defined separately in 2 different files.</p>
  
  <p><strong>App.js file</strong></p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import SplashScreen from './src/components/SplashScreen';
  import HomeScreen from './src/components/HomeScreen';
  
  const Navigation = StackNavigator({
      Splash: {
        screen: SplashScreen
      },
      Home: {
        screen: HomeScreen
      }
  })
  
  export default Navigation;
  </code></pre>
  
  <p><strong>My SplashScreen component:</strong></p>
  
  <pre><code>import React from 'react';
  import { StyleSheet,
           Text,
           View,
           } from 'react-native';
  
  export default class SplashScreen extends React.Component {
    static navigationOptions = {
      header: null
    }
  
    componentWillMount() {
      setTimeout(() =&gt; {
        this.props.navigation.navigate('Home')
      },2000)
    }
  
    render() {
      return(
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.welcome}&gt;Splash Screen&lt;/Text&gt;
          &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'skyblue'
    },
    welcome: {
      color: '#FFF',
      fontSize: 30
    }
  })
  </code></pre>
  
  <p>My HomeScreen component:</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet,
           Text,
           View,
           } from 'react-native';
  
  export default class SplashScreen extends React.Component {
    static navigationOptions = {
      header: null
    }
  
    componentWillMount() {
      setTimeout(() =&gt; {
        this.props.navigation.navigate('Home')
      },2000)
    }
  
    render() {
      return(
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.welcome}&gt;Splash Screen&lt;/Text&gt;
          &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'skyblue'
    },
    welcome: {
      color: '#FFF',
      fontSize: 30
    }
  })
  
  
  
  
  import React from 'react';
  import { StyleSheet,
           Text,
           View,
           } from 'react-native';
  
  export default class SplashScreen extends React.Component {
    static navigationOptions = {
      header: null
    }
  
    componentWillMount() {
      setTimeout(() =&gt; {
        this.props.navigation.navigate('Home')
      },2000)
    }
  
    render() {
      return(
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.welcome}&gt;Splash Screen&lt;/Text&gt;
          &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'skyblue'
    },
    welcome: {
      color: '#FFF',
      fontSize: 30
    }
  })
  </code></pre>
  
  <p><strong>Action.js file</strong></p>
  
  <pre><code>import axios from 'axios';
  export const FETCH_DATA = 'fetch_data';
  
  const API = 'https://api.myjson.com/bins/fz62x';
  
  export function fetchData() {
    const request = axios.get(API);
  
    return dispatch =&gt; {
      return request.then((data) =&gt; {
          dispatch({
            type: FETCH_DATA,
            payload: data
          })
      })
    }
  }
  </code></pre>
  
  <p><strong>My reducer</strong></p>
  
  <pre><code>import { FETCH_DATA } from './actions';
  
  export default function(state={}, action) {
    switch(action.type) {
      case FETCH_DATA:
        return {
          ...state,
          action.payload
        };
  
      default:
          return state;
    }
  }
  </code></pre>
  
  <p>Can anyon please tell me if this the correct way? If not, then what is the correct way?</p>