Fetching data from API in react native using redux

I would say there is no correct or incorrect way to do this. But I can share kind of a pattern that I usually use.

First I would create separate folders for different files. Actions in actions folder, reducers in reducers folder etc... I would create separate constants.js file and configureStore.js file and put them inside the project root directory.

I would drop Axios library and would just use Fetch API for data fetching. Considering your code I would do the following.

Create configureStore.js file inside your project root directory. I recommend you to use Redux-Thunk. You can find more info from here.

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import app from './reducers';
import thunk from 'redux-thunk';

export default function configureStore() {
    let store = createStore(app, applyMiddleware(thunk))
    return store
}

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import configureStore from './configureStore';
import HomeScreen from './screens/HomeScreen';

const NavigationApp = StackNavigator({
    HomeScreen: { screen: HomeScreen }
})

const store = configureStore()

export default class App extends Component {

    render() {
        return (
            <Provider store={store}>
                <NavigationApp />
            </Provider>
        );
    }
}

Let's create constants.js and we place it inside the project root directory.

constants.js

export const FETCHING_TODOS = 'FETCHING_TODOS';
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS';
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS_FAILURE';

Now let's move on and create our action file which would be put inside the actions folder. Let's name it something like fetchToDos.js. Let's create a simple function using Fetch API.

fetchToDos.js

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getTodos())

        return(fetch('https://api.myjson.com/bins/fz62x'))
        .then(res => res.json())
        .then(json => {

            return(dispatch(getToDosSuccess(json)))
        })
        .catch(err => dispatch(getToDosFailure(err)))
    }
}

function getToDos() {

    return {
        type: FETCHING_TODOS
    }
}

function getToDosSuccess(data) {

    return {
        type: FETCH_TODOS_SUCCESS,
        data
    }
}

function getToDosFailure() {
    return {
        type: FETCH_TODOS_FAILURE
    }
}

fetchToDos.js with Axios

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';
import axios from 'axios';

export function fetchToDos() {

    return (dispatch) => {
        dispatch(getUser())
        axios.get('https://api.myjson.com/bins/fz62x')
            .then(function (response) {

                // handle your response here, create an object/array/array of objects etc... 
                // and return it in dispatch(getToDosSuccess(data over here))

                return(dispatch(getToDosSuccess(response.data)))
            })
            .catch(err => dispatch(getToDosFailure(err)))
    }
}

// rest is the same...

Moving on to reducers. Let's create two files - index.js, todos.js and put them inside reducers folder.

todos.js

import { FETCH_TODOS_SUCCESS, FETCH_TODOS_FAILURE, FETCHING_TODOS } from '../constants';

const initialState = {
    todos: [],
    isFetching: false,
    error: false
}

export default function todosReducer(state = initialState, action) {

    switch(action.type) {
        case FETCHING_TODOS:
            return {
                ...state,
                isFetching: true
            }
        case FETCH_TODOS_SUCCESS:
            return {
                ...state,
                isFetching: false,
                todos: action.data
            }
        case FETCH_TODOS_FAILURE:
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

index.js

import { combineReducers } from 'redux';
import todos from './todos';

const rootReducer = combineReducers({
    todos
})

export default rootReducer

Basically "heavy lifting" is done. I would only create one screen because let's assume that users would tap back button (Android) while at home screen, they would end up on that splash screen. So in this example I am going to use one screen only.

HomeScreen.js

import React, { Component } from 'react';
import {
    View,
    Text,
    ActivityIndicator
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTodos } from '../actions/fetchTodos';

class HomeScreen extends Component {

    componentDidMount() {

        this.props.fetchTodos()

    }

    render() {

        const { todos, isFetching } = this.props.todos

        if (isFetching) {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <ActivityIndicator size={'large'} /> 
                </View>
            )
        } else {
            return(
                <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
                    <Text>todos.length</Text>
                </View>
            )
        }

    }

}

function mapStateToProps(state) {
    return {
        todos: state.todos
    }
}

function mapDispatchToProps(dispatch) {
    return {
        ...bindActionCreators({ fetchTodos }, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

I really hope that you find this concept useful because I can say from my experience that it helped me a lot when I first get started and it helped me to understand the whole concept of redux much better.

Sorry if there are any typos and errors. I was on a flow.