reducer.js

const initialState = {
  index: 0,
  routes: [
    { key: 'a', title: 'Tab A' },
    { key: 'b', title: 'Tab B' },
    { key: 'c', title: 'Tab C' },
    { key: 'd', title: 'Tab D' }
  ]
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHANGE_TAB':
      return {
        ...state,
        index: action.index
      }
    default:
      return state;
  }
}

TabBarNav.js

import React, { Component } from 'react'
import { TabBarIOS } from 'react-native'
import { connect } from 'react-redux'

import { TabA, TabB, TabC, TabD } from '../tabs';

class TabBarNav extends Component {

  _changeTab(i) {
    this.props.changeTab(i);
  }

  _renderTabContent(route) {
    switch (route.key) {
      case 'a':
        return <TabA />
      case 'b':
        return <TabB />
      case 'c':
        return <TabC />
      case 'd':
        return <TabD />
    }
  }

  render() {
    const tabs = this.props.tabs.routes.map((tab, i) => {
      return (
        <TabBarIOS.Item
          key={tab.key}
          title={tab.title}
          onPress={() => this._changeTab(i)}
          selected={this.props.tabs.index === i}
        >
          {this._renderTabContent(tab) }
        </TabBarIOS.Item>
      );
    });
    
    return (
      <TabBarIOS tintColor={'blue'}>
        {tabs}
      </TabBarIOS>
    );
  }
}


// CONTAINER

const mapStateToProps = (state) => {
  return {
    tabs: state.nav.tabs
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    changeTab: (index) => dispatch({ type: 'CHANGE_TAB', index })
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TabBarNav);