Connect TabBar in its own file, instead of TabBarContainer.js

src/App.js

@@ -6,7 +6,7 @@ import {
 
 import './App.css';
 
-import TabBarContainer from "features/tabs/TabBarContainer";
+import TabBarContainer from "features/tabs/TabBar";
 import UnitInfo from "features/unitInfo/UnitInfo";
 import Pilots from "features/pilots/Pilots";
 import Mechs from "features/mechs/Mechs";

src/features/tabs/TabBar.jsx

@@ -1,11 +1,23 @@
 import React from "react";
+import {connect} from "react-redux";
 import {Menu} from "semantic-ui-react";
 
 import ToggleDisplay from "common/components/ToggleDisplay"
 
 import Tab from "./Tab";
 
-const TabBar = (props) => {
+import {selectCurrentTab} from "./tabsSelectors";
+import {selectTab} from "./tabsActions";
+
+const mapState = (state) => {
+    const currentTab = selectCurrentTab(state);
+
+    return {currentTab};
+}
+
+const actions = {onTabClick : selectTab};
+
+export const TabBar = (props) => {
     const {tabs, currentTab, onTabClick, ...otherProps} = props;
 
     const tabItems = tabs.map(tabInfo => {
@@ -42,4 +54,4 @@ const TabBar = (props) => {
     )
 }
 
-export default TabBar;
+export default connect(mapState, actions)(TabBar);